"Key" prop in map

January 10, 2023

Newbie here, Sorry for the silly question 🙂

How am gonna put the "Key" prop in this function?

The code is on the above of ContactShadows. I tried many ways but all the methods I tried are not working properly. Can you please check and tell me how am gonna put the "Key" props?

    import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";

import "./PartOne.css";

const PartOne = () => {
const [rooms, setRooms] = useState([
    Room1,
    Room2,
    Room3,
    Room4,
    Room5,
    Room6,
    Room7,
    Room8
]);

useEffect(() => {
    console.log("rooms state:", rooms);
}, [rooms]);

return (
    <div className="wrapper">
        {rooms.map((room, roomIndex) =>
            room({ position: positions[roomIndex] })
        )}
    </div>
);
};
export default PartOne;

Thank You

>Solution :

You could wrap that element from room function in a <React.Fragment> and assign the key on it:

return (
    <div className="wrapper">
        {rooms.map((room, roomIndex) => (
            <React.Fragment key={`${roomIndex}`}>
                {room({ position: positions[roomIndex] })}
            </React.Fragment>
        ))}
    </div>
);