fill ant design Table with data from state

Question

I'm new in reactJS I stack in this problem : I have to fill the table with data from API

• the problem: I can fill the table only with the const variable, not in the useEffect function.

the code:

function CandidaturesList() {
  const [candidatures , setCandidatures]=useState(null);
  useEffect(() => {

    async function fetchData() {
      try {

        
        const response = /*some code to get data*/
        setCandidatures(response);
        
      } catch (error) {
        // Catch any errors for any of the above operations.
        alert(
          `Failed to load  `,
        );
        console.error(error);
      } 
    }
    fetchData();

  },[candidatures]);
  

  // project table start
  const project = [
    {
      title: "COMPANIES",
      dataIndex: "name",
      width: "32%",
    },
    {
      title: "JOB TITLE",
      dataIndex: "jobtitle",
    },
    {
      title: "DECISION",
      dataIndex: "decision",
    },

  ];
  const candidature = [
    {
      key: "1",

      name: (
        <>
          <div className="avatar-info">
            <Title level={5}>Spotify Version</Title>
          </div>
        </>
      ),
      jobtitle: (
        <>
          <div className="semibold">Manager</div>
        </>
      ),
      decision: (
        <>
          <div className="ant-progress-project">
            <Tag icon={<CheckCircleOutlined />} color="#87d068">
              Valid
            </Tag>
          </div>
        </>
      ),
    },

    {
      key: "2",
      name: (
        <>
          <div className="avatar-info">
            <Title level={5}>Progress Track</Title>
          </div>
        </>
      ),
      jobtitle: (
        <>
          <div className="semibold">Developer full stack</div>
        </>
      ),
      decision: (
        <>
          <div className="ant-progress-project">
            <Tag icon={<SyncOutlined spin />} color="#108ee9">
              Processing
            </Tag>
          </div>
        </>
      ),
    },
]
return (
        <div className="table-responsive">
          <Table
            columns={project}
            dataSource={candidature}
            pagination={false}
            className="ant-border-space"
          />
        </div>
);} 

So the const candidature is just having a fake data and the candidatures state is having the real data to put in the table the question is: how can I map the "candidatures" state to put the data in the table with the same style as the "const candidature" or how can I put the data of "candidatures" in this const? One thing to note here is that candidatures state variable is array of objects, like

{[titre_poste: 'developeur full stack', nomCompagnie: 'nomCompagnie',decision: "none",id: "2"],[ ... ] }```

Answer 1

Firstly, i see that candidatures is your data and projects is your table schema you shouldn't put html within your data array, you should instead use the render key within your schema array which in your case is projects.

it should look something like this

// project table start
  const project = [
    {
      title: "COMPANIES",
      dataIndex: "name",
      width: "32%",
      render: text => (
          <div className="avatar-info">
            <Title level={5}>{text}</Title>
          </div>
      )
    }
  ]

  const candidature = [
    {
      key: "1",
      name: "Some string value"
    }
]

secondly, in your useEffect function, you have created a recursion via your dependency of candidatures. You are listening for changes in candidatures while upon every change you trigger an api call which changes the candidatures state which in turn again triggers the useEffect call.

to prevent this, remove candidatures as useEffect dependency.