Tag filter: rerendering resets the element

[TTimes]

Hello, I have been trying to create a toggle filter it works to a degree in which it a seperate search bar search does render the correct StudentItem. However the items that are not rendered seem to get reset and any tags that were previously added to them do not render and it seems the tag form in “” gets reset, however i can still search for the tags even if they are not showing. I am sure that the tags exists inside the child components but they just arent rendering on screen.

---

import React, { useState, useEffect, useRef } from 'react';

import '../css/style.css';
import { TagItem } from './TagItem';

const StudentItem = ({ studentInfo, searchTagTerm }) => {
  const [tagData, setTagData] = useState(['']);

/*function that grabs the state of the child StudentItem and sets the state named tagData to the child data */
  const checkTags = (data, ID) => {
    setTagData(tagData.concat(data));
    //  console.log(`'tagdata: ${tagData} ID: ${ID}`);
  };

  return (
    <div>
   /*{tagData.includes(searchTagTerm is the line searching for the tags and below is a ternary operator that either renders my elements or sets it to null

*/

      {tagData.includes(searchTagTerm)  ?  (
        <StudentItem studentInfo={studentInfo} checkTags={checkTags} />
      ) : null}
    </div>

  );

};

export default StudentItem;

[TTimes]

Update: I recently got it to work by putting it into one file. So I think its an issue with the way I am saving the tags perhapes. Please share your insights.

[lasjorg]

Are you using StudentItem inside itself? Should that be TagItem?

[TTimes]

No however you are definelty onto something, I did manage to figure it out: I believe it was an issue of the student item rendering after the tagitem which was cause the input to reset.

Thanks for the reply

[lasjorg]

So the code you posted isn’t correct?

Because in the code you posted the StudentItem component is returning a StudentItem component and you are not using the TagItem component.

[TTimes]

Unfortunately it isnt, its ok though I did manage to fix the problem.