title: Passing data without props on a functionnal component?
body: <p><em>Hello guys,</em></p>
  
  <p>I'm relatively new to <strong>react hooks,</strong> and back in my time(one year ago), when I was passing props through
  component, I would then use them with <strong>"props.something."</strong></p>
  
  <p>Now I have done a "todo list" and I can use my props in another way, by referencing the props in an objet in parameter :</p>
  
  <p><strong>const Form = ({ addTodo }) => {
     addTodo(x)
  }</strong></p>
  
  <p>What is that ? Why we don't use <strong>this.props anymore,</strong> why the <strong>object</strong> in parameter ? Is the old way passing props <strong>dead</strong> ? Is this because of react <strong>Hooks</strong> ?</p>
  
  <p><em>To illustrate more my exemple here the two component talking to eachother.</em></p>
  
  <p>The first one : </p>
  
  <pre><code>import React, {useState} from 'react';
  import Form from './Form';
  
  
  const Affichage = () =&gt; {
  
      const [todos, setTodos] = useState([
          '1',
          '2',
          '3',
          '4'
      ])
  
      const addTodo = text =&gt; {
          const newTodos = [...todos, text];
          setTodos(newTodos)
      }
  
      return (
          &lt;div&gt;
              &lt;Form addTodo={addTodo} /&gt;
              &lt;ul&gt;
                  {todos.map((item, index) =&gt;{
                      return(
                          &lt;li key={index}&gt;
                              {item}
                          &lt;/li&gt;
                      )
                  })}
              &lt;/ul&gt;
          &lt;/div&gt;
      )
  
  }
  
  export default Affichage;`
  </code></pre>
  
  <p>The second one :</p>
  
  <pre><code>import React, {useState} from 'react';
  
  
  const Form = ({ addTodo }) =&gt; {
  
      const [value, setValue] = useState('');
  
      const handleSubmit = e =&gt; {
          e.preventDefault();
          // console.log(value);
          addTodo(value);
  
      }
  
  
      return(
          &lt;form onSubmit={handleSubmit}&gt;
  
              &lt;input type="text" onChange={e =&gt; setValue(e.target.value)}/&gt;
              &lt;button&gt;Envoyer&lt;/button&gt;
  
          &lt;/form&gt;
      )
  
  }
  
  export default Form;
  </code></pre>
  
  <p>If someone passing by could enlight me it would awesome ☺</p>