tengo dos componentes
Componente A -
const handleLike(id) { ..... handle the logic for the button and setting the state } <ComponentB handleLike={handleLike}/>Componente B -
return( <> <button onclick={props.handleLike("123")}/> </> ) <ComponentB handleLike={handleLike}/>Este código funciona, pero cambia el estado en el Componente A y el estado no se actualiza en el Componente B
¿Cómo se puede solucionar esto?
Componente A -
const[likeId,setLikeId]= useState(like) const handleLike(id) { ..... handle the logic for the button and setting the state setLikeId(id) } <ComponentB likeId={likeId} handleLike={handleLike}/>Componente B -
const { likeId }=props return( <> <button onclick={props.handleLike("123")}/> </> )Puede usar useState en su componente principal, manejar la devolución de llamada desde el elemento secundario, actualizar el estado y pasar el estado al componente secundario de esta manera:
const ComponentA= () => { const [likes, setLikes] = useState('') const handleLikeCallback(id) { setLikes(id) } return <ComponentB handleLikeCallback={handleLikeCallback} likes={likes}/> } const ComponentB = ({handleLikeCallback, likes}) => <button onclick={handleLikeCallback("123")}>{likes}</button>