Why Am I Getting an Expected an Assignment or Function Call and Instead Saw an Expression

React Expected an assignment or function call and instead saw an expression

You need to return a value at each pets.map iteration, currently you’re returning undefined.

  return pets.map((pet, index) => {
    return (
      <div key={index}>
        <h3>{pet.name}</h3>
        <p>{pet.species}</p>
      </div>
    )
  });

Line 7:9: Expected an assignment or function call and instead saw an expression no-unused-expressions

I think the problem is that you put your jsx in the function `MainContent without returning anything.

To fix this do:

function MainContent() {
  return (
    <put all the jsx here>
  )
}

2022 React - Expected an assignment or function call and instead saw an expression

Your useEffect dependency array is in the wrong place, I think that's what is causing it.

should be:

useEffect (() => {
    setChartData({
      labels: data.webs.data.map((t) => t.attributes.severity),
      datasets: [
        {
          label: "Price in USD",
          data: data.webs.data.map((t) => t.attributes.id),
          backgroundColor: [
            "#ffbb11",
            "#ecf0f1",
            "#50AF95",
            "#f3ba2f",
            "#2a71d0"
          ]
        }
      ]
    })
  }, [data])

Also ther is a . on the line you have the arrow on but I'm not sure id it's a copy paste typo or is it actually in your code

Function to map an object throws "Expected an assignment or function call and instead saw an expression"

You are using a new javascript feature called Optional chaining which is only supported since typescript 3.7. Make sure you have at least version 3.7 or newer in your react project.

Keep in mind that map is meant to transform an array, you have to return a value for each item in the callback. I changed it to forEach in the example below:

const myFunction = (list: IListType | undefined) =>{
    let listpush: AType[]=[];

    list?.item.forEach(it => {
        if(it.values && it.values?.key && it.values?.value){
            listpush.push({
                attr1: it.name,
                attr2: it.values.key,
                attr3: it.values.value,
            })
        }
    })

    return listpush;
}

and alternative would be to use filter and map:

const myFunction = (list: IListType | undefined): AType[] => {
    if(!list){
        return [];
    }

    return list.item.filter(it => {
        return it.values && it.values?.key && it.values?.value;
    }).map(item => ({
        attr1: it.name,
        attr2: it.values.key,
        attr3: it.values.value,
    }))
}

---

Related Topics