Connecting 2 different arrays from the same external link - React hooks fetch

Question

I am able to fetch data what url, but the thing is the url is divided into couple of arrays and I need to fetch data and connect them.

Example:

{
  "array1": [
    { "data1": {"name": "Name", "phone": "Phone"}}
    ]  
  "array2" : [
    { "data2": { "color": "Color", "car": "Car" } }
   ]
}

Data hooks :

const userInfo = "URL";
 const [userData, setUserData] = useState([]);
    useEffect(() => {
        getUserInfo();
    }, []);

    const getUserInfo = async () => {
        const response = await fetch(UserInfo);
        const jsonData = await response.json();
        setUserData(jsonData);
    };

Fetch data:

{ userData.data && userData.array1.map((array1, index)  =>
        <li key={"index" + index}  
                    <h5>{array1.data1.name} </h5>
        </li>
)}

I need to connect name from array1 with color from array2, but I can not find the way to do it.

Expected Output : list of data

Answer 1

If you can get those two arrays then you can use this to combine them:

const getUserInfo = async () => {
  const response = await fetch(UserInfo);
  const jsonData = await response.json();
  
   // this assumes `jsonData` in an object with keys `array1` and `array2`
   // if this is not the case, change `jsonData` below to the location of
   // those two arrays
   
  const { array1, array2 } = jsonData;

  const combinedArray = array1.map(({ data1 }, i) => ({
    ...data1,
    ...array2[i].data2 // assumes there is always a corresponding index in array 2
  }));

  // combinedArray will look like [ { name: 'Name', phone: 'Phone', color: 'Color', car: 'Car' } ] 


  setUserData(combinedArray);
};
]