Question 74146 in Reactjs Question posted in
The new location for the React Documentation can be found here.

filteredfruitData.map is not a function – react error – Reactjs

I have below fruitData

const fruitData = [{ fruitname: 'apple', fruitprice: '200', fruitcolor: 'red'},
{ fruitname: 'mango', fruitprice: '500', fruitcolor: 'yellow'},
{ fruitname: 'berry', fruitprice: '300', fruitcolor: 'red'}];

In below return section, I am trying to check which fruits in fruitData have color ‘red’.

return (
<section>
  {fruitData.map((info) => {
    if (info.fruitcolor === ‘red’) {
 // return filtered fruit data
      return null;
    }

Can you help me how I should return filtered fruit data. I want it to be in below format

 const filteredfruitData = [{ fruitname: 'apple', fruitprice: '200', fruitcolor: 'red'},

{ fruitname: 'berry', fruitprice: '300', fruitcolor: 'red'}];
Tags:

5

Answers


  1. 0

    Use filter method to filter on red color

    const filteredData = fruitData.filter((fruit) => fruit.fruitcolor === "red")
console.log(filteredData);
    Login or Signup to reply.
  2. 0

    You should be using filter method in this scenario,

      return (
    <section>
      {fruitData
        .filter((fruit) => fruit.fruitcolor === "red")
        .map((info) => (
          <span>{info.fruitname} </span>
        ))}
    </section>
  );

    Check demo

    Login or Signup to reply.
  3. 0

    Here you go!

    function App() {
const fruitData = [{ fruitname: 'apple', fruitprice: '200’, fruitcolor: ‘red’},
{ fruitname: 'mango', fruitprice: '500’, fruitcolor: ‘yellow’},
{ fruitname: ’berry', fruitprice: ‘300’, fruitcolor: ‘red’}]

const filteredFruits = fruitData.filter((item) => item.fruitcolor === "red")

return (
<section>
  {filteredFruits.map((fruit) => {
   // Your code
   })}
</section>
)
}
export default App;
    Login or Signup to reply.
  4. 0

    Hey you can try this using array method map to copy your data and showing the result.

    const fruitData = [
    { fruitname: "apple", fruitprice: "200", fruitcolor: "red"},
    { fruitname: 'mango', fruitprice: '500', fruitcolor: 'yellow'},
    { fruitname: 'berry', fruitprice: '300', fruitcolor: 'red'},
];
return (
 <section>
   {fruitData.map((data) => {
     if (data.fruitcolor === "red") return data;
   })}
</section>
)
    Login or Signup to reply.
  5. 0

    You may avoid using adding any escaping logic while using Array.map() method. Instead, you may use Array.filter() method before Array.map().

    const fruitData = [{
    fruitname: "apple",
    fruitprice: "200",
    fruitcolor: "red"
  },
  {
    fruitname: "mango",
    fruitprice: "500",
    fruitcolor: "yellow"
  },
  {
    fruitname: "berry",
    fruitprice: "300",
    fruitcolor: "red"
  },
];

const filteredFruitData = fruitData.filter(
  ({
    fruitcolor
  }) => fruitcolor === "red"
);

console.log("filteredFruitData", filteredFruitData);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search