CODEWITHSUNDEEP
reactjseslint
Leticia Fatima
Leticia Fatima

Reputation: 522

warning Expected to return a value at the end of arrow function

I'm getting this warning on the console. However, in my view the code is correct:

{
    report.report.map((item, key) => {
        if (item.status !== "pending_review") {
            return (
                <div key={key}>
                    <Spacing appearance="small" />

                    <Title as="h5" >Data: {formatDate(item.createdAt)}</Title>
                    <Title as="h5" >Realizada por: {item?.reported_by?.users[0]?.name}</Title>

                    <Spacing appearance="x-small" />

                    <Title as="h5" >{item?.description}</Title>

                    <Spacing appearance="medium" />
                </div>
            )
        }
    })
}

Upvotes: 0

Views: 50

Answers (1)

JAM
JAM

Reputation: 6205

You are missing a default return value after the if-statement:

{
    report.report.map((item, key) => {
        if (item.status !== "pending_review") {
            return (
                <div key={key}>
                    <Spacing appearance="small" />

                    <Title as="h5" >Data: {formatDate(item.createdAt)}</Title>
                    <Title as="h5" >Realizada por: {item?.reported_by?.users[0]?.name}</Title>

                    <Spacing appearance="x-small" />

                    <Title as="h5" >{item?.description}</Title>

                    <Spacing appearance="medium" />
                </div>
            )
        }
        return null; // 👈
    })
}

If you want to shorten it & avoid the if, you could simply filter the array before mapping:

{
    report.report
      .filter(item => item.status !== "pending_review")
      .map((item, key) => (
         <div key={key}>
           ... content ...
         </div>
      ));
}

Upvotes: 1

Related Questions