//Solo hace el loop del objeto, pero puedes estar reutilizando este subcomponente en otros subcomponentes...
import { Link } from "react-router-dom";//Necesitas esto para poder usar Link en vez de aNchor tags y que no se mande el request al servidor para que los componentes hagan toda la pagina, lo que es mucho mucho mas rapido

//Usas "Props" para pasar data entre componentes padre a hijo
const ListaObj = ({PropsDeBlogs, TituloDelH2, funcBorrar} ) => {
	//Metodo 1, pasando todo como objeto, ListaObj = (props) => {
	//console.log(props);//aqui ves todo lo que se paso del comp padre al hijo
	//let blogs=props.PropsDeBlogs;//props es una var obj del sistema, con esto creas una nueva "blogs" para usar con la info del componente padre
	//let titulo=props.TituloDelH2;//se vale pasar mas de un props
	
	//Metodo 2, PREFERIBLE (lo requieres para pasar funciones) desde la variable de la función leer el props con (las variables se llamarian asi), ListaObj = ({ PropsDeBlogs, TituloDelH2 })=>{ 
	let blogs=PropsDeBlogs;//realmente puedes usar PropsDeBlogs directo, como la función funcBorrar
	let titulo=TituloDelH2;
  

  return (
    <div className="loops">
		<h2>{titulo}</h2>
      {blogs.map(feach => (   /*El metodo .map es como un feach*/
        <div className="blog-preview" key={feach.id} > {/*El blog id disque lo necesita React para reconocer...*/}
          	<Link to={"/blogs/"+feach.id}>{/*Con esto creas los lins a RutaVariable*/}
				<h2>{ feach.title }</h2>
				<p>Written by { feach.author }<br />
				{feach.body.substring(0,20)+"..."}</p>
			</Link>
			{/*<button onClick={ ()=>{					//Esto lo ocultas porque al traer la BDD con el custom hook ya no borras 
														dentro del mismo componente la data y necesitas un useState	
						  //console.log("El id es "+feach.id);
						  funcBorrar(feach.id);
					  } }>Ocultar</button>*/}
        </div>
      ))}
    </div>
  );
}


export default ListaObj;