Reactjs: create table from array

Question

I am using React JS and I have this js array:

(7) [Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4)]
0: (4) ["050222222", "field", "field", "field"]
1: (4) ["050222222", "field", "field", "field"]
2: (4) ["050222222", "field", "field", "field"]
3: (4) ["050222222", "field", "field", "field"]
4: (4) ["050222222", "field", "field", "field"]
5: (4) ["050222222", "field", "field", "field"]
6: (4) ["050222222", "field", "field", "field"]
length: 7

What I am trying to do is create a table with the content of the array. Let's say:

Phone         |   Full Name    | Custom1  | Custom2 | Custom3 |
0502222222        field           field     field     field
0502222222        field           field     field     field
0502222222        field           field     field     field
0502222222        field           field     field     field
0502222222        field           field     field     field
0502222222        field           field     field     field

But I want it to be able to add other fields (for example if I am adding another 'custom', I want it to create another td so it will be equal).

What I've tried (myData is a useState variable that holds the js array above):

    const createTable = () => {

    if (myData == undefined) return <div>Nothing</div>;
    const Table = () => (<table><tbody>{myData.map(generateRow)}</tbody></table>);
    const generateRow = rowData => (<tr>{rowData.map(generateCell)}</tr>);
    const generateCell = cellData => (<td>{cellData}</td>);

    return (
        <table>
            <tbody>
                <tr>
                    <th>Phone</th>
                    <th>Full Name</th>
                    <th>Custom1</th>
                    <th>Custom2</th>
                    <th>Custom3</th>
                </tr>
                {Table()}
            </tbody>
        </table>
    )
}

The problem is that everything is appearing in the "phone" field. I also want it to be flexible if I add a new field it will add the field to another "custom".

Answer 1

Issue is your Table() also have again table tag. Just remove the Table() and use directly {myData.map(generateRow)}.

Also, make sure, data also has 5 columns (similar to count of th).

Update: Handle to add the columns dynamically based on data column size.

const CreateTable = (props) => {
   
    if (myData == undefined) return <div>Nothing</div>;
    const generateRow = rowData => (<tr>{rowData.map(generateCell)}</tr>);
    const generateCell = cellData => (<td>{cellData}</td>);
    
    const all_cols = ['Phone', 'Full Name', 'Custom1', 'Custom2', 'Custom3'];
    
    const generateHeader = (count) => (<tr>{all_cols.slice(0, count).map((name) => <th>{name}</th>)}</tr>);

    return (
        <table>
            <tbody>
                {generateHeader(props.myData[0].length)}
                {props.myData.map(generateRow)}
            </tbody>
        </table>
    )
}

   const myData = [["050222222", "field", "field", "field", "field"],
                    ["050222222", "field", "field", "field", "field"]]
                    
     const myData2 = [["050222222", "field"],
                    ["050222222", "field"]]

ReactDOM.render(<CreateTable myData={myData2} />, document.getElementById("app"))

th, td {
  width: 100px;
  border: 1px solid lightgrey;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>


<div id="app"></div>