How to map over 2 Array of object in React and render to Table

Question

how can i map over 2 Array of object in React and render to one Table. what are option for this issue. should i merge these two array into one ? Please check Json Data

let URL1 = "http://api_url/users"
let URL2 = "http://api_url/users-card"

const promise1 = axios.post(URL1, inputValue , {headers: {'Content-Type': 'text/plain'}});
const promise2 = axios.post(URL2, inputValue , {headers: {'Content-Type': 'text/plain'}});

Promise.all([promise1, promise2]).then(function(values) {
  setDataSetOne(values[0]);
 setDataSetTwo(values[1]);
});

 <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
         <TableBody>

             <TableCell>DataOne</TableCell>
              <TableCell>DataOne</TableCell>
              <TableCell>DataTwo</TableCell>

       </TableBody>
      </Table>
    </TableContainer>

Json Data 1st

[{
    "name": "adnan hassan",
    "count": 6960
}, {
    "name": "adnan",
    "count": 69666660
}]

2nd Json Data

[{
    "keyword_idea_metrics": {
        "competition": "LOW",
        "avg_monthly_searches": "6600",
        "competition_index": "22",
        "low_top_of_page_bid_micros": "53135896",
        "high_top_of_page_bid_micros": "278963954"
    },
    "keyword_annotations": {
        "concepts": []
    },
    "text": "dubai homes",
    "_text": "text"
}]

Edit: Json Data has been added

Please update your question to show the shape of the data in the arrays, and the end result you'd like to see for how they would be merged/displayed in your UI. — Willow
– Willow, Commented Mar 21, 2022 at 20:03
Probably something like this users.map(user => { const card = cards.find(card => card.userId === user.id) // Now return JSX using card or user properties }). — morganney
– morganney, Commented Mar 21, 2022 at 20:06
What do your two input sources have to do with one another? And what does either one have to do with your food/nutrition output table? You need to put more work into your question, I think. — Scott Sauyet
– Scott Sauyet, Commented Mar 21, 2022 at 21:08

Leo · Accepted Answer · 2022-03-21 20:22:17Z

1

You can use one object to contain two states like this:

import { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  // use one object to contain two states
  const [data, setData] = useState({ dataOne: '', dataTow: '' });
  // fetch data
  useEffect(() => {
    const fetchData = async () => {
      const dataOne = await axios.post(URL1, inputValue, {
        headers: { 'Content-Type': 'text/plain' },
      });
      const dataTow = await axios.post(URL2, inputValue, {
        headers: { 'Content-Type': 'text/plain' },
      });
      setData({ dataOne, dataTow });
    };
    fetchData();
  }, []);
  // display data
  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableCell>{data.dataOne}</TableCell>
          <TableCell>{data.dataTow}</TableCell>
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default App;

I hope it helpful.

answered Mar 21, 2022 at 20:22

Leo

1763 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adnan Hassan Over a year ago

Hi @Prayx Thank you so much for your comment. It helped me a lot. I solved this issue by both json data merge with lodash.com/docs/4.17.15#mergeWith

Collectives™ on Stack Overflow

How to map over 2 Array of object in React and render to Table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related