I have two components,
Component A -
const handleLike(id) {
.....
handle the logic for the button and setting the state
}
<ComponentB handleLike={handleLike}/>
Component B -
return(
<>
<button onclick={props.handleLike("123")}/>
</>
)
<ComponentB handleLike={handleLike}/>
This code works, but it changes the state in the Component A and the state is not updated in the Component B
How can this be solved?
Component 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}/>
Component B -
const { likeId }=props
return(
<>
<button onclick={props.handleLike("123")}/>
</>
)
You can use useState in your parent component, handle callback from child, update the state, and pass the state to child component like this:
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>