CODEWITHSUNDEEP
javascriptreactjs
KawaiiSlave
KawaiiSlave

Reputation: 41

How can I rerender the page using using the splice method since the splice method mutates it?

I have an array of questions that are being randomly displayed to the user.

Questions

[{ question: "Does your animal have scales?",
      type: "scaly",
    }, {
      question: "Does your animal have feathers?",
      type: "fluffy",
    },
    {
      question: "Does your animal have smooth skin?",
      type: "smooth",
    },
    {
      question: "Is your animal rough to the touch ?",
      type: "rough",
    },

I also will have two onclick buttons on the page signifying "yes" and "no" for the user to choose from. If the user chooses yes for the first question then how would I filter every animal that's type is scaly to store it for the next question and remove that question from the array as well? The problem I'm faced with since I'm new to React as well as the fact that state is immutable, and I assume I need the splice method to remove a question from the array and rerender the page afterward with the next question. The problem is that splice mutates state, and doesn't allow for it? I haven't found any sources to go off of, and have been struggling to figure it out. 

<Button onClick={(addAnimal) => {}} variant="primary">
          Yes!
        </Button>
        <Button onClick={(rmAnimal) => {}} variant="primary">
          No...
        </Button>

Sorry If there isn't enough information. I don't really know how the state works fully and stressed out

Upvotes: 1

Views: 43

Answers (1)

Drew Reese
Drew Reese

Reputation: 203099

I'd first create a standardized button handler that takes two parameters, type and include, for which to filter your data on.

const animalHandler = (type, include) => animalData.filter(
  animal => include ? animal.type === type : animal.type !== type
);


const animalData = [{
    type: 'furry'
  },
  {
    type: 'large'
  },
  {
    type: 'small'
  },
  {
    type: 'aquatic'
  },
  {
    type: 'large'
  },
  {
    type: 'small'
  },
  {
    type: 'aquatic'
  },
  {
    type: 'small'
  },
  {
    type: 'aquatic'
  },
  {
    type: 'furry'
  },
];

const animalHandler = (type, include) => animalData.filter(animal => include ? animal.type === type : animal.type !== type);

console.log(animalHandler('large', true));
console.log(animalHandler('large', false));

Update onClick handlers to pass the relevant details from the question.

<Button onClick={() => animalHandler(question.type, true)} variant="primary">
  Yes!
</Button>
<Button onClick={() => animalHandler(question.type, false} variant="primary">
  No...
</Button>

Bonus

Convert animalHandler to curry the event function to remove the need to define an anonymous onClick function for the buttons.

const animalHandler = (type, include) => () => animalData.filter(
  animal => include ? animal.type === type : animal.type !== type
);

...

<Button onClick={animalHandler(question.type, true)} variant="primary">
  Yes!
</Button>
<Button onClick={animalHandler(question.type, false} variant="primary">
  No...
</Button>

Upvotes: 1

Related Questions