How to map in react js

Question

In my code I am using map to call my Expense-Item component and if I console I am getting all the values but this is not rendering means it shows nothing on output screen:

import React from 'react';
import ExpenseItem from './ExpenseItem';
import Card from '../UI/Card';
import './Expenses.css';
import { useState } from 'react';
import ExpensesFilter from './ExpenseFilter';


const Expenses = (props) => {
  const [filterYear, setFilterYear] = useState("2020");

  const FilterChangeHandler = (filter)=>{
      setFilterYear(filter);
  }

  return (
    <Card className="expenses">
      <ExpensesFilter selected={ filterYear } onFilterChangeHandler = { FilterChangeHandler }/>
      {props.items.map( (expense) =>{
            <ExpenseItem
                title={expense.title}
                amount={expense.amount}
                date={expense.date}
            />
          } 
        )}
    </Card>
  );
}

export default Expenses;

Your callback in map is wrong, you have to put return. i.e. => {return <ExpenseItem... } — Joe C.
– Joe C., Commented Aug 4, 2022 at 15:54

Abhishek Singh · Accepted Answer · 2022-08-04 16:11:59Z

1

Including return you should also check if props.items not null and has length to map to avoid breaking UI in these cases. You should modify your code as this,

return (
  <Card className="expenses">
    <ExpensesFilter
      selected={filterYear}
      onFilterChangeHandler={FilterChangeHandler}
    />
    {props.items && props.items.length > 0
      ? props.items.map((expense) => {
          return (
            <ExpenseItem
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          );
        })
      : null}
  </Card>
);

answered Aug 4, 2022 at 16:11

Abhishek Singh

5272 silver badges10 bronze badges

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

Comments

Behemoth · Accepted Answer · 2022-08-04 15:54:53Z

1

Add a return statement before your <ExpenseItem/> in order to return it from the .map()callback and render it. That‘s it.

answered Aug 4, 2022 at 15:54

Behemoth

9,6055 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to map in react js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related