Show only those elements those are not in another array in react

Question

I have an array of fruits and users can select fruits and user-selected fruits will be added in another state array called user_fruits. If a user selects the fruit then that fruit will no longer be available as an option.

fruits = ['apple', 'mango', 'watermelon', 'jackfruite', 'guava', 'berry']
state = {
  user_fruits: []
}

addFruitToTheList = () => {
  //This function adds fruits to the user_fruite array
}

deleteFruitsList = () => {
  // This function deletes the fruits from the user_fruit array
}

render() {
  return (
    <div>
        {/*here I want to render only those that are in the user list*/}
        {this.state.user_fruits.map((key, id) => {
          return <li>
            {key}<button onClick={this.removeTheFruiteFromUserList}>X</button>
          </li>
        })}

        {/*but I want to render only those that are not in the user list*/}
        {this.fruits.map((key, id) => {
          return <button onClick={this.addFruitToTheList} key={id} value={key}>{key}</button>   
        })}
    </div>
  )
}

How can I show only those fruits that are not in the user_fruits array, then if I delete those fruits then it will show again.

Since there's only a few fruits, you could just filter them out with an `.includes`: `this.fruits.filter(fruit => !this.state.user_fruits.includes(fruit)).map(....)` — cbr, May 21 '20 at 14:39
By the way, the function passed to `this.state.user_fruits.map` will return undefined since there's curly braces `{ }` around the function but no `return`. — cbr, May 21 '20 at 14:39
you just need to update `user_fruits` and `fruits` array properly when any fruit is added or removed from `user_fruits` array. When any fruit is added in `user_fruits` array, remove that fruit from `fruits` array and similarly, when any fruit is removed from `user_fruits` array, add it back in `fruits` array. Implement functions that add or remove a fruit from `user_fruits` array in [this](https://pastebin.com/TCH5uZVR) way — Yousaf, May 21 '20 at 15:06

score 2 · Accepted Answer · answered May 21 '20 at 14:40

2

            {this.fruits.filter(fruit => !this.state.user_fruits.includes(fruit)).map((key, id) => {
                return <button onClick={this.addFruitToTheList} key={id} value={key}>{key}</button>   
            })}

You can append a filter function in front of the map function

answered May 21 '20 at 14:40

Jake Lam

3,254
3
25
44

The number of elements in the array does not matter. If this code (which is the same as that in the answers to the proposed duplicate) is not working, there is something else wrong with the code. For instance, `this.fruits` or `this.state.user_fruits` does not contain the values you think they do. – Heretic Monkey May 21 '20 at 14:49

score 1 · Answer 2 · answered May 21 '20 at 14:49

const allFruits = [
  "apple",
  "mango",
  "watermelon",
  "jackfruite",
  "guava",
  "berry"
];

export default function App() {
  const [selectedFruits, setSelectedFruits] = React.useState<string[]>([]);
  const availableFruits = allFruits.filter(
    fruit => !selectedFruits.includes(fruit)
  );

  const selectFruit = (fruit: string) =>
    setSelectedFruits([...selectedFruits, fruit]);
  const deselectFruit = (fruit: string) =>
    setSelectedFruits(selectedFruits.filter(f => f !== fruit));

  return (
    <div>
      <div>
        <h2>User selected fruits</h2>
        {selectedFruits.map(fruit => (
          <button key={fruit} onClick={() => deselectFruit(fruit)}>
            {fruit}
          </button>
        ))}
      </div>

      <div>
        <h2>Available fruits</h2>
        {availableFruits.map(fruit => (
          <button key={fruit} onClick={() => selectFruit(fruit)}>
            {fruit}
          </button>
        ))}
      </div>
    </div>
  );
}

You can try it here https://codesandbox.io/s/proud-morning-7lo91

Show only those elements those are not in another array in react

2 Answers2