I have 2 function component , one have input and button and its passing data to states. Now i want to get state data from first function conlmponent to second component and display text to my div in second component. Is it possible to share states data from 1st component to 2nd component? The component are functions not classes
function Articles(){ return(<div> <h1>{inputtext}</h1> </div>) } function Inputform() { const [inputtext, setInputtext] = useState(''); const [task_list,setTask_list] = useState([]); function changer(event){ setInputtext(event.target.value); } function add_post(){ setTask_list(inputtext); } return ( <div> <label>Post</label> <input name="first" onChange={changer} /> <button onClick={add_post}>Dodaj</button> </div> ) }
trying to get states in Articles from Input but it doesnt work
Advertisement
Answer
what you would like to do, is to put this two components inside a third one and have them share whatever states/data you want.
function ThirdComponent() { const [inputtext, setInputtext] = useState(''); const [task_list,setTask_list] = useState([]); function Articles(){ return(<div> <h1>{inputtext}</h1> </div>) } function Inputform() { function changer(event){ setInputtext(event.target.value); } function add_post(){ setTask_list(inputtext); } return ( <div> <label>Post</label> <input name="first" onChange={changer} /> <button onClick={add_post}>Dodaj</button> </div> ) } return ( <> </> ) }