title: Creating tags and passing props up components to filter in React
body: <p>I am putting together an app using React that displays fetched data in a card component and filters by name through in input form. The displayed data also has an input field to create tags in each card.</p>
  <p>What I would like to do is then be able to create an additional filter to filter the cards by the tags in addition to the name.</p>
  <p>I am able to create the student cards, filter by name, and add the tags to each student card. What I would like to do is add the tags to the student hook in App.js. I have tried passing back the tags via Tag props from the StudentCard.js but I could not figure out a way to pass the student.id with the tags to update and filter the student hook in App.js correctly. I'm relatively new to React so I'm thinking I may be missing something obvious but it's also possible what I'm trying to do cannot be accomplished in this way. Any help would be greatly appreciated.</p>
  <p>For the sake of simplicity I have cut the components down and removed the fetch API to make it easier to review.</p>
  <p>The components are below:</p>
  <p>Example of App.js:</p>
  <pre><code>import './App.css';
  import StudentCard from &quot;./StudentCard&quot;;
  
  function App() {
  
    const [student, setStudent] = useState([])
    const [studentFilter, setStudentFilter] = useState('')
  
    useEffect(() =&gt; {
      const loadStudent = async () =&gt; {
          const student = await fetch(`https://someAPI.com`)
          .then(res =&gt; res.json())
          .then(data =&gt; data)
          setStudent(student)
      }
      loadStudent()
  }, [])
  
  // Example of student = &quot;students&quot;: [
  //   {
  //       &quot;city&quot;: &quot;SF&quot;,
  //       &quot;email&quot;: &quot;tom@t.com&quot;,
  //       &quot;firstName&quot;: &quot;Tom&quot;,
  //       &quot;id&quot;: &quot;1&quot;,
  //       &quot;lastName&quot;: &quot;Holmes&quot;,
  //   },
  
  let studentsArray = student.students
  
  let students = studentsArray &amp;&amp; studentsArray.filter(f =&gt;
    (f.firstName + ' ' + f.lastName).toLowerCase().includes(studentFilter) || studentFilter === '')
      .map((students, id) =&gt; 
        &lt;StudentCard key={id} students={students}/&gt;
    )
  
    return (
       &lt;div className=&quot;App&quot;&gt;
          &lt;p&gt;
              &lt;input id=&quot;filter&quot;
              name=&quot;filter&quot;
              type=&quot;text&quot;
              value={studentFilter}
              placeholder=&quot;Search by name&quot;
              onChange={event =&gt; setStudentFilter(event.target.value)}
              /&gt;
          &lt;/p&gt;
          //I'm having an issue figuring out how to make this filter work
          &lt;p&gt;
            &lt;input id=&quot;tag-input&quot;
            type=&quot;text&quot; 
            name=&quot;tag-filter&quot; 
            value=&quot;&quot;
            placeholder=&quot;Search by tag&quot;
            /&gt;
          &lt;/p&gt;        
        {students}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Example of Student Card:</p>
  <pre><code>import React, { useState } from 'react';
  import TagsInput from './TagsInput'
  
  
  const StudentCard = ({students}) =&gt; {
  
  
  const selectedTags = tags =&gt; tags;
  
      return (
           &lt;div className=&quot;student-info-container&quot;&gt;
              &lt;div className=&quot;student-info&quot;&gt;
                  &lt;div className=&quot;student-name&quot;&gt;
                      {students.firstName} {students.lastName}
                  &lt;/div&gt;
                  &lt;div className=&quot;indent-info&quot;&gt;
                      &lt;div&gt;
                          Email: {students.email}
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;TagsInput selectedTags={selectedTags} studentId={students.id}/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default StudentCard;
  </code></pre>
  <p>Example of TagInput.js</p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  
  const TagsInput = (props) =&gt; {
  
      const [tags, setTags] = useState([]);
  
      const addTags = event =&gt; {
          if (event.key === &quot;Enter&quot; &amp;&amp; event.target.value !== &quot;&quot;) {
              setTags([...tags, event.target.value]);
              props.selectedTags([...tags, event.target.value, props.studentId]);
              event.target.value = &quot;&quot;;
          }
      };
      console.log(props)
      return (
          &lt;div className=&quot;tags-input&quot;&gt;
              &lt;div className=&quot;tag-container&quot;&gt;
                  {tags.map((tag, index) =&gt; (
                      &lt;span className=&quot;tag&quot; key={index}&gt;{tag}&lt;/span&gt;
                  ))}
              &lt;/div&gt;
              &lt;input
                  id=&quot;tag-filter&quot;
                  type=&quot;text&quot;
                  onKeyUp={event =&gt; addTags(event)}
                  placeholder=&quot;Add a tag&quot;
              /&gt;
          &lt;/div&gt;
      );
  };
  export default TagsInput;
  ```
  </code></pre>