Home > Software design >  create card using array of data react
create card using array of data react

Time:01-21

hi everyone I have data given below by using this data I just want to create a cart enter image description here

Code Sandbox

CodePudding user response:

If you want to link value and label this way:

ak => 1
pk => 2
plk => 3
k => 5

It would be better practice to change your data structure and move them aside. It avoids running in cases where label[x] is defined, but value[x] is not:

export default function App() {
  const result = [
    {
      name: "shanu",
      items: [
        { label: "ak", value: 1 },
        { label: "pk", value: 2 },
        { label: "plk", value: 3 },
        { label: "k", value: 5 },
      ],
    }
  ];

  return result.map((el) => {
    return (
      <div>
        <h1>{el.name}</h1>
        <div className="vart">
          <div>
            {el.items.map((e, index) => {
              return (
                <p>
                  {e.label} : {e.value}
                </p>
              );
            })}
          </div>
        </div>
      </div>
    );
  });
}
  •  Tags:  
  • Related