Me ayudan, por favor? tengo dos componentes hermanos, uno que muestra los comentarios de cada estado y otro donde puedo agregar un comentario al estado correspondiente.
componente <Estados>
el componente estados recibe la lista de estados desde su padre y la renderiza en el hook currentEstado, este tiene dos componentes hijos que hacen la función de mostrar los comentarios asociados a el estado y escribir el comentario asociado al estado
const Estados = (props) => {
const [estadosState, setCurrentEstado] = useState(props.estados)
const addComentario = (comentario, id) => {
estadosState.map(e =>{
if(e.id == id) {
e.comentariosEstado.push(comentario)
}
})
}
return (
<Fragment>
<h2> lista</h2>
<ul>
{
estadosState.length > 0 ?
estadosState.map((item, index) =>
<li key={index}>
{item.estado}
<Comentarios comentarios={item.comentariosEstado}>
</Comentarios>
<EscribirComentarios
id={item.id}
addComentario={addComentario}>
</EscribirComentarios>
</li>
) : (
<h2>No hay comentarios aún {props.estados.length}</h2>
)
}
</ul>
</Fragment>
);
}
tengo el componente <comentarios>
este componente me ayuda a renderizar los comentarios asociados a cada estado, en una iteración realizada previamente en el componente padre <Estados>
const Comentarios = (props) => {
console.log('comentarios', props.comentarios)
return (
<Fragment>
<ul>
{
props.comentarios.map((comentario, index) =>
<li key={index}>
<small>{comentario.nombre}</small>
<p>{comentario.comentario}</p>
</li>
)
}
</ul>
</Fragment>
)
}
Y tengo el componente <escribir-comentario>
Este componente no es más que un formulario que manda un comentario y en el método addComentario() se le agrega la lógica, y listo.
en teoría funciona porque se agregan estados, y se visualizan, pero cuando voy a agregar un comentario asociados a un estado, el en el log funciona, hace el push a la lista, pero no el componente <Comentarios>
no me renderiza la lista completa, quisiera que me ayudaran con este tema, yo creo que es porque no uso el concepto de hooks correctamente, pero soy nuevo en esto.
Gracias.
const EscribirComentarios = (props) => {
const { handleSubmit, register } = useForm();
const onSubmit = (data, e) => {
props.addComentario(data, props.id)
//limpiar campos
e.target.reset();
}
return(
<React.Fragment>
<form onSubmit={handleSubmit(onSubmit)} className="containerEscribirComentaro">
<div className="InputEscribirComentario">
<input
name="comentario"
ref={
register({
required: { value: true, message: 'Comentario obligatorio' }
})
}
/>
</div>
<div className="submitEscribirEstado">
<input
type="submit"
value="Comentar"
/>
</div>
</form>
</React.Fragment>
)
}
EDITADO
Si, el componente padre no está interviniendo en el método de agregar comentarios al estado, este es el padre <app.js>
function App() {
const estados = [
{
id: uuidv4(),
nombre: 'Juan Rodriguez',
estado: 'Este es un estado de información en ejemplo.',
comentariosEstado: [
{ id: uuidv4(), comentario: 'Este es un comentario del estado', nombre: 'Elena' },
{ id: uuidv4(), comentario: 'Este es un comentario del estado', nombre: 'Elena' }
]
},
{
id: uuidv4(),
nombre: 'Martha Fernández',
estado: 'Este es un estado de información en ejemplo 2.',
comentariosEstado: [
{ id: uuidv4(), comentario: 'Este es un comentario del estado 2', nombre: 'Camilo' },
{ id: uuidv4(), comentario: 'Este es un comentario del estado 2', nombre: 'Luffy' }
]
}
]
const [estadosList, setEstadosList] = useState(estados)
const armarEstados = (estado) =>{
// después se genera un random para el estado.nombre.
estado.id = uuidv4()
estado.nombre = "Camilo F."
estado.comentariosEstado = []
}
const addEstado = (estado) => {
// estado.id = uuidv4()
armarEstados(estado)
setEstadosList([
...estadosList,
estado
])
}
return (
<React.Fragment>
<EscribirEstados addEstado={addEstado}></EscribirEstados>
<Estados estados={estadosList}></Estados>
</React.Fragment>
);
}