How can I map an array of dicts inside a React return statement?

Question

I'm trying to map an array inside a return statement. However, my approach returns

Expression statement is not assignment or call

I also tried by wrapping it in a React Fragment which doesn't return any result either.

const PlannerDetailsBody = (props) => {
        
    return (
        <Fragment>
        {props.values.position && props.values.department && props.values.start_date ?
            <div className="details-body flex flex-col p-4">
                This offer is for {props.values.applicant} applying for the role as {props.values.position} starting {props.values.start_date}.
                The starting month's gross salary will be {props.values.start_salary} € and will increase {props.values.interest_interval} by {props.values.interest_raise} %
                on a {props.values.interest_type} level.
                <br/> <br/>
                The salary increase is limited to the first {props.values.months} of the employment. After that period the final salary of {props.outputs.final} € will apply monthly going forward unless a new package is signed. Thus
                the overall package value of this offer sums up to {props.outputs.salaryPackage} with a monthly average gross salary of {props.outputs.average}.
            </div>
                : <div className="p-16 text-center text-sx-gray-dark">Please add some details to the offer to display details.
            </div>}

            <div className="details-body-plan-wrapper border-t-1">
                <div className="details-body-plan p-4">
                    <div className="plan-headline text-lg text-sx-purple-dark-soft">Payment Plan</div>
                    <div className="plan grid grid-rows-4 grid-flow-col gap-4">



                    // This doesnt work.. 
                        {Object.entries(props.paymentPlan).map(([key,value])=>{
                            <div>{key}</div>
                            <div>{value}</div>
                        })}



                    </div>
                </div>
            </div>
        </Fragment>
    )
}

Answer 1

This code is wrong.

You should not wrap by {}. If you use {}, it means function body so you need to add return. Otherwise you should use ().

            // This doesnt work..
            {Object.entries(props.paymentPlan).map(([key,value])=>{
              <div>{key}</div>
              <div>{value}</div>
            })}

Or

            {Object.entries(props.paymentPlan).map(([key, value], index)=> {
              return (
                <Fragment key={index}>
                <div>{key}</div>
                <div>{value}</div>
              </Fragment>
              );
            })}

So should look like following:

              {Object.entries(props.paymentPlan).map(([key, value], index)=>(
              <Fragment key={index}>
                 <div>{key}</div>
                 <div>{value}</div>
              </Fragment>
              ))}

I assumed that paymentPlan is an array of an array with key and value according to by your code. See your code .map(([key, value])).

map's callback function's first parameter indicates element in the array.

e.g.

someArray.map(callbackFunc);

someArray.map((element, index) => {});

someArray.map((element, index) => ());