import Favcheck from "./favcheck.jsx";
export default function Mensbuttons() {
  const list1 = ["test1","name1"];
  const list2 = ["test2","name2"];
  const list = [];
  list.push(list1,list2);

  return (
    
    for (let i = 0; i < list.length; i  ) {

    <>
      <div >
        <form method="get" action="/mensapage" >
          <button type="submit" >
            <div > {list[i][0]</div>
          </button>
          <Favcheck />
        </form>
      </div>
    </>
  }
  );
  
}

So I'm really sure thats not how its done but I have no idea how I would do it differenty. So I have a component in react and I want to loop throw an array with arrays. In order to create a button with a name of an element of the array inside the parentarray. Im not sure where I should insert the for-loop. I would appreciate an answer.

CodePudding user response：

I modified your code to use map.

import React from "react";

export default function Mensbuttons() {
  const list1 = ["test1","name1"];
  const list2 = ["test2","name2"];
  const list = [];
  list.push(list1,list2);

  return (
    <>
      <div >
        <form method="get" action="/mensapage" >
          {list.map(item => 
            (<button type="submit" name={item[1]} >
              <div >{item[0]}</div>
            </button>
            )
          )}
        </form>
      </div>
    </>
  );
  
}

But I suggest you to set like following to use name instead of index.

[
  { label: "name1", value: "test1" },
  { label: "name2", value: "test2" }
]

import React from "react";

export default function Mensbuttons() {
  const listNew = [
    { label: "name1", value: "test1" },
    { label: "name2", value: "test2" }
  ];

  return (
    <>
      <div >
        <form method="get" action="/mensapage" >
          {listNew.map(item => 
            (<button type="submit" name={item.label} >
              <div >{item.value}</div>
            </button>
            )
          )}
        </form>
      </div>
    </>
  );
  
}

https://stackblitz.com/edit/react-1cwpnl?file=src/App.js

CodePudding user response：

export default function Mensbuttons() {
  const list1 = ["test1", "name1"];
  const list2 = ["test2", "name2"];
  const list = [];
  list.push(list1, list2);

  return (
    <>
      <div >
        <form method="get" action="/mensapage" >
          {list.map((data) =>
            data.map((item) => (
              <button type="submit" >
                <div > {item}</div>
              </button>
            ))
          )}
        </form>
      </div>
    </>
  );
}

CodePudding user response：

you can use map method. notice that you have to set a key attribute for elements in loop.

import Favcheck from "./favcheck.jsx";
export default function Mensbuttons() {
  const list1 = ["test1","name1"];
  const list2 = ["test2","name2"];
  const list = [];
  list.push(list1,list2);

  return (
    <>
    {list.map(innerArray => 
      innerArray.map(item => <div key={item} >
        <form method="get" action="/mensapage" >
          <button type="submit" >
            <div >{item}</div>
          </button>
          <Favcheck />
        </form>
      </div>))}
     </>
  );
  
}