javascript - How to conditional render inside map in a functional component of react js - Stack Overflow

admin管理员组

文章数量:1417070

I have an array. in which i want to iterate over and do conditional checks and display the correct element. i'm using functional ponent.

Below is an example :

import React, { useState, useEffect } from "react";

function Job(props) {
  const [resp_data, setdata] = useState("");
  const [look, setlook] = useState("");
  useEffect(() => {
//    some api calls happen here and response data is stored in state resp_data
  }, [props]);
  return (
    <>
    <div className="product_list">
        {resp_data.length > 0
          ? resp_data.map((item) => {
              {item.looking_for === "work" ? (
                  <div className="card-rows work" key={item.id}>
                    work
                  </div>
                ) : (<div className="card-rows no_work" key={item.id}>
                No work
              </div>)
              }
            })
          : <div>array length is 0</div>}
      </div>
    </>
  );
}

export default Job;

The response data received from api call happening inside useEffect is stored in state variable resp_data.

if resp_data length is not zero, i need to iterate over the list and check if the field value "looking_for" is equal to "work"

if true display a ponent , else display another ponent.

if resp_data length is zero display "array length is zero"

this i want to implement, but i could not find many answers for functional ponents. i have tried many possible ways by switching, changing the braces etc..my hard luck.

Any help is greatly appreciated.

I have an array. in which i want to iterate over and do conditional checks and display the correct element. i'm using functional ponent.

Below is an example :

import React, { useState, useEffect } from "react";

function Job(props) {
  const [resp_data, setdata] = useState("");
  const [look, setlook] = useState("");
  useEffect(() => {
//    some api calls happen here and response data is stored in state resp_data
  }, [props]);
  return (
    <>
    <div className="product_list">
        {resp_data.length > 0
          ? resp_data.map((item) => {
              {item.looking_for === "work" ? (
                  <div className="card-rows work" key={item.id}>
                    work
                  </div>
                ) : (<div className="card-rows no_work" key={item.id}>
                No work
              </div>)
              }
            })
          : <div>array length is 0</div>}
      </div>
    </>
  );
}

export default Job;

The response data received from api call happening inside useEffect is stored in state variable resp_data.

if resp_data length is not zero, i need to iterate over the list and check if the field value "looking_for" is equal to "work"

if true display a ponent , else display another ponent.

if resp_data length is zero display "array length is zero"

this i want to implement, but i could not find many answers for functional ponents. i have tried many possible ways by switching, changing the braces etc..my hard luck.

Any help is greatly appreciated.

• javascript
• reactjs

Share Improve this question Follow asked Jun 17, 2021 at 19:35 LiquidDeathLiquidDeath 1,82811 gold badge99 silver badges2020 bronze badges 1

• 2 hey, you missed the return keyword when you return the jsx. ` return <div className="card-rows work" key={item.id}> work </div>` – Yajat Vishwakk Commented Jun 17, 2021 at 19:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You are not returning anything from the 'map' function.

resp_data.map((item) => (
          item.looking_for === "work" ? (
              <div className="card-rows work" key={item.id}>
                work
              </div>
            ) : (<div className="card-rows no_work" key={item.id}>
            No work
          </div>)
          )
        )

本文标签： javascriptHow to conditional render inside map in a functional component of react jsStack Overflow