Show only those elements those are not in another array in react [duplicate]

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
– cbr, Commented May 21, 2020 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
– cbr, Commented May 21, 2020 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 way — Yousaf
– Yousaf, Commented May 21, 2020 at 15:06

Jake Lam · Accepted Answer · 2020-05-21 14:40:08Z

3

            {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, 2020 at 14:40

Jake Lam

3,4723 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Heretic Monkey Over a year ago

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.

Michal Szorád · Accepted Answer · 2020-05-21 14:49:50Z

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

Collectives™ on Stack Overflow

Show only those elements those are not in another array in react [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related