Skip to content
Advertisement

Getting data from react state function component

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 (
        <>
        </>
    ) 
}
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement