title: React, pass state between sibling components
body: <p>I am working on a simple ShoppinList. I have two components, <code>Form.js</code> and <code>List.j</code>. How can I display in <code>List.js</code> the items that are stored in <code>list</code> array in <code>Form.js</code> ? I don't want <code>useState</code> to be written in <code>App.js</code>, but would keep the logic separate in its own components.</p>
  <p><strong>App.js:</strong></p>
  <pre><code>//Imporing Components
  import Form from &quot;./Components/Form&quot;;
  import List from &quot;./Components/List&quot;;
  
  function App() {
    return (
        &lt;div className=&quot;App&quot;&gt;
            &lt;header&gt;
                &lt;h1&gt;Shopping List&lt;/h1&gt;
            &lt;/header&gt;
            &lt;Form/&gt;
            &lt;List/&gt;
        &lt;/div&gt;
    )
  }
  </code></pre>
  <p><strong>Form.js:</strong></p>
  <pre><code>/*Create a Component*/
  const Form = () =&gt; {
  
      const [inputText,setInputText] = useState(&quot;&quot;)
      const [list,setList] = useState([])
  
      const submitBtn = (e) =&gt;{
           e.preventDefault()  /*kein refresh tätigen*/
          setList([
              ...list,{inputText}
          ])
      }
  
      /*Funktion*/
      /*const inputTextHandler =  (e) =&gt; {
          setInputText(e.target.value)
      }*/
  
      return (
          &lt;form&gt;
              &lt;input
                  value={inputText}
                  type=&quot;text&quot;
                  onChange={
                      (e) =&gt; setInputText(e.target.value)
                  }
              /&gt;
              &lt;button type=&quot;submit&quot; onClick={submitBtn}&gt;
                  &lt;i&gt;Add&lt;/i&gt;
              &lt;/button&gt;
          &lt;/form&gt;
      )
  }
  export default Form
  </code></pre>
  <p><strong>List.js:</strong></p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  
  const List = () =&gt;{
      return(
          &lt;div&gt;
              &lt;ul&gt;{[List]}&lt;/ul&gt;
          &lt;/div&gt;
      )
  }
  export default List
  </code></pre>