如何在反应中使用嵌套循环

Question

I want to convert this code into react.js, I got an error when I used the map array inside the input tag. ReactJS code is demonstrated below,

This is my frontend code using laravel

<div class="form-group">

<label for="tags" class="text-info">Select Tags</label>

@foreach($tags as $tag)
       <div class="checkbox">
             <label>
                 <input type="checkbox" 
                      value="{{$tag->id}}"
                      name="tags[]"
                 @foreach($post->tags as $t)
                      @if($tag->id == $t->id)checked 

                     @endif 
                 @endforeach >
                {{$tag->tag}}</label>
       </div>
        @endforeach
</div>

This is my react code... enter code here

   <div className="form-group row">
  <label for="inputEmail3" className="col-sm-2 col-form-label">
    TAG
  </label>
  <div className="col-sm-10">
    <div className="checkbox">
      {tate.tags.map(
        (tag) =>
        
          form.tags.map((taged) => (
                           
            <label>
              <input
                name="tag[]"
                type="checkbox"
                value={tag.id}
                onChange={handlecheck}

                defaultChecked={tag.id == taged.id ? true : false}
              />

             {tag.Tag_name}

            </label>
          )):</div></div></div>

Answer 1

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

Another example would be like below:

render() {
    return (
      <table className="table">
        <tbody>
          {Object.keys(templates).map(function (template_name) {
            return (
              <tr key={template_name}>
                <tr>
                  <td>
                    <b>Template: {template_name}</b>
                  </td>
                </tr>
                {templates[template_name].items.map(function (item) {
                  return (
                    <tr key={item.id}>
                      <td>{item}</td>
                    </tr>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}