Return a filtered array based on user input javascript

user_9100910 0
Viewed 85

I have an user input.

Based on that input I need to filter an array of options.

I have been able to submit the data, I am now inside my handleSubmitData function where I am writing the if conditions which should then return a filtered array of results to the screen however this is not happening. It must be to do with scope however I cannot seem to figure out what is wrong. Here is the code. Any guidance would be helpful

const Container = () => {
  const [cards, setCards] = useState([
    "studentCard",
    "anywhereCard",
    "liquidCard",
  ]);
  

  const handleSubmitData = (userInput) => {
    const { employmentStatus } = userInput.state;
    const { earnings } = userInput.state;

    if (employmentStatus === "student" && earnings < 16000) {
      return cards.filter((card) => card !== "liquidCard");
    }
    if (employmentStatus === "student" && earnings >= 16000) {
      return cards;
    }
    return cards;
  };

  return (
    <div className="Container">
      <UserInputForm submitData={handleSubmitData} />
        {cards} 
    </div>
  );
};

export default Container;

I have put cards within my render return part of the component but nothing happens there are no filtered cards..

reactjs filter scope arrays javascript
4 Answers

If you return something, it's not gonna re-render it again, you have to update the state

for EX:

const filterdCards = cards.filter((card) => card !== "liquidCard");
setCards(filterdCards);
user_20327510

If you want to render only the filtered cards, you could do this.

const Container = () => {
  const [cards, setCards] = useState([
    "studentCard",
    "anywhereCard",
    "liquidCard",
  ]);
 const [filteredCards,setFilteredCards = useState(["studentCard",
    "anywhereCard",
    "liquidCard",])
  

  const handleSubmitData = (userInput) => {
    const { employmentStatus } = userInput.state;
    const { earnings } = userInput.state;

    if (employmentStatus === "student" && earnings < 16000) {
      setFilteredCards(cards.filter((card) => card !== "liquidCard"))
    }
    else if (employmentStatus === "student" && earnings >= 16000) {
      setFilteredCards(cards)
    } else {
    setFilteredCards(cards)
   }
  };

  return (
    <div className="Container">
      <UserInputForm submitData={handleSubmitData} />
        {filteredCards} 
    </div>
  );
};

export default Container;
user_42887060

Set filtered cards to cards state on handleSubimitData.

const Container = () => {
  const allCards = ['studentCard', 'anywhereCard', 'liquidCard'];
  const [cards, setCards] = useState([]);

  const handleSubmitData = userInput => {
    const { employmentStatus } = userInput.state;
    const { earnings } = userInput.state;

    let filtered = [...allCards];

    if (employmentStatus === 'student' && earnings < 16000) {
      filtered = allCards.filter(card => card !== 'liquidCard');
    }

    setCards(filtered);
  };

  return (
    <div className="Container">
      <UserInputForm submitData={handleSubmitData} />
      {cards}
    </div>
  );
};

export default Container;
user_105857080

Change the state if you want to see changes in the UI, instead of doing those return statements. (use setCards)

user_120666770
Related