title: How can I get my input to render in a paragraph, using React?
body: <p>I am working on a Todo list, and I have created the functionality for the todo to be added. My list, which renders the todo is located in a sepearate component from where I created the addTodo function. Everything seems to be fine, however, when I click to add a todo, the input that I added doesn't render in the paragraph that I created within the Todo component. I also consoled the data that I am adding in the input, and it shows up in the console. I believe my problem lies with how I am setting my props in the paragraph elemement in my Todo component. This is my code, if it helps.</p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  import classes from &quot;./addlink.module.css&quot;;
  
  import firebase from &quot;firebase/app&quot;;
  import initFirebase from &quot;../../config&quot;;
  import &quot;firebase/firestore&quot;;
  
  import Todo from &quot;../Todo/Todo&quot;;
  
  import { v4 as uuidv4 } from &quot;uuid&quot;;
  
  initFirebase();
  const db = firebase.firestore();
  
  function AddLink(props) {
    const [todos, setTodos] = useState([]);
    const [input, setInput] = useState(&quot;&quot;);
  
    useEffect(() =&gt; {
      db.collection(&quot;links&quot;)
        .orderBy(&quot;timestamp&quot;, &quot;desc&quot;)
        .onSnapshot((snapshot) =&gt; {
          setTodos(
            snapshot.docs.map((doc) =&gt; ({
              id: doc.id,
              todo: doc.data().todo,
            }))
          );
        });
    }, []);
  
    const addTodo = (event) =&gt; {
      event.preventDefault();
  
      db.collection(&quot;links&quot;).add({
        id: uuidv4(),
        todo: input,
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      });
      console.log(input);
      setInput(&quot;&quot;);
    };
  
    return (
      &lt;div className={classes.addlink}&gt;
        &lt;form&gt;
          &lt;div className={classes.adminlink}&gt;
            &lt;input
              type=&quot;text&quot;
              value={input}
              onChange={(event) =&gt; setInput(event.target.value)}
            /&gt;
            &lt;button
              className={classes.adminbutton}
              type=&quot;submit&quot;
              onClick={addTodo}
            &gt;
              Add new link
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        {todos.map((todo, id) =&gt; (
          &lt;Todo todo={todo} key={id} /&gt;
        ))}
        
      &lt;/div&gt;
    );
  }
  
  export default AddLink;
   
  </code></pre>
  <p>And the Todo.js</p>
  <pre><code> import React from &quot;react&quot;;
  import { AiOutlinePicture } from &quot;react-icons/ai&quot;;
  import { AiOutlineStar } from &quot;react-icons/ai&quot;;
  import { GoGraph } from &quot;react-icons/go&quot;;
  import DeleteForeverIcon from &quot;@material-ui/icons/DeleteForever&quot;;
  
  import classes from &quot;./todo.module.css&quot;;
  
  import firebase from &quot;firebase/app&quot;;
  import initFirebase from &quot;../../config&quot;;
  import &quot;firebase/firestore&quot;;
  
  initFirebase();
  const db = firebase.firestore();
  
  function Todo(props) {
    const deleteHandler = (event) =&gt; {
      db.collection(&quot;links&quot;).doc(props.todo.id).delete();
    };
  
    return (
      &lt;li className={classes.adminsection}&gt;
        &lt;div className={classes.linkCards}&gt;
          &lt;h3&gt;Todo&lt;/h3&gt;
          &lt;p&gt;{props.value}&lt;/p&gt;
          &lt;div&gt;
            &lt;AiOutlinePicture /&gt;
            &lt;AiOutlineStar /&gt;
            &lt;GoGraph /&gt;
            &lt;DeleteForeverIcon onClick={deleteHandler} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    );
  }
  
  export default Todo;
  </code></pre>