I am trying to lift state up. I have four different components Parent, Child1, Child2 and Child3.
The parent component has a default value of ‘Hi’. The default value gets updated to ‘Hi2’ in Child3 component. I want Child1 component to get this updated state of ‘Hi2’ but it doesn’t get updated and still prints out the default value of ‘Hi’ in the console.
I am not sure what I did wrong?
import React, { useState } from 'react';
function Parent() {
const [value, setValue] = useState('Hi');
return (
<div>
<Child1 value={value} />
<Child2 setValue={setValue} />
</div>
);
}
function Child1({value}) => {
const fetchValue = () => {
console.log('value is: ', value);
}
return (
<div>
<Text value={value}/>
</div>
);
}
function Child2({setValue}) => {
return (
<div>
<Child3 setValue={setValue}/>
</div>
);
}
function Child3({setValue}) => {
const fetchResults = () => {
setValue('Hi2');
}
return (
<div>
<Button click={fetchResults }/>
</div>
);
}