how to make condition if else in props next.js component

user_16590085 0
Viewed 887

I have a component called Card, then I want to add a condition if the data = 0 return the first image, otherwise return the second image, more details can be seen below:

    {data?.data?.map((dataVote: any, i: number) => (
      <Card
        //i  want to add below if else condition
        (if data == 0)
        return(image={'/static/images/image-10.png'})
        //else 
        return(image={'/static/images/image-22.png'})

        name={dataVote.attributes.nama}
        title={dataVote.attributes.deskripsi}
        user={dataVote.attributes.sosmed}
        onClick={() => {
          setOpen(true)
          fetchProvince()
          fetchProfession()
          fetchId(dataVote?.id)
        }}
        key={i}></Card>
    ))}
next.js reactjs
1 Answers

You can use boolean expressions to conditionally render content. The ternary operator is often very helpful/useful for this in React.

{data?.data?.map((dataVote: any, i: number) => (
  <Card
    image={data == 0
      ? '/static/images/image-10.png'
      : '/static/images/image-22.png'
    }
    name={dataVote.attributes.nama}
    title={dataVote.attributes.deskripsi}
    user={dataVote.attributes.sosmed}
    onClick={() => {
      setOpen(true)
      fetchProvince()
      fetchProfession()
      fetchId(dataVote?.id)
    }}
    key={i}></Card>
))}
user_86908570
Related