how to loop for display complicate array value : Reactjs

Question

I will create loop for display array value in return state. Now I display by {text.nameSub[0].nameSub[0][0].nameSub},{text.nameSub[0].nameSub[0][1].nameSub} but I don't know create for loop instead this code. Help me please, Thank you so much for suggest.

import React,{Component} from 'react'
import '../App.css'

class addEntity extends Component {

    constructor(props){
        super(props);
        this.state ={
            index: 1,
            entity: []
        }
    }
    render() {
        return(
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Entity Type</th>
                            <th scope="col">Sub-type</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                        {this.state.entity.map((text,index) =>{
                            return(
                                <tr key={text.nameEn}>
                                    <th>{index+1}</th>
                                    <td scope="col">{text.nameEn}</td>
                                    <td scope="col">
                                    {text.nameSub[0].nameSub[0][0].nameSub},
                                    {text.nameSub[0].nameSub[0][1].nameSub}
{/* I will create loop for display it here like this {text.nameSub[0].nameSub[0][i].nameSub} */}
                                    </td>
                                </tr>
                            )
                        })}
                </table>

            </div>
        )
    }
}

export default addEntity;

Answer 1

You can iterate like this,

{this.state.entity.map((text,index) =>{
     return(
        <tr key={text.nameEn}>
            <th>{index+1}</th> //this might be `td` and not `th`
            <td scope="col">{text.nameEn}</td>
            <td scope="col">
              {text.nameSub[index].map((name,ind) => {
                 return <span>{name[ind].nameSub}</span> 
              })}
            </td>
        </tr>
     )
})}