react nested loop

const table = (props) => {
    return (
        <table className="customeTable tableInventory">
            <TableHead/>
            <tbody className="admin-list-table-body">
            {props.dayNames.map((index, value) => {
                return (<tr className="rowClickable" key={value}>
                    <th className="table_head" key={value}>{moment().format('YYYY-MM-DD') === index ? 'Today' : moment(index).format('dddd')}</th>
                    {[...Array(24).keys()].map((i) => {
                        return (<td className="tableCells" key={i}>
                            <input type="text" className="inputBox" value={(props.availabilities) ? props.availabilities[i] : '0'} onChange={e =>props.textInput(e)} data-id={index+'_'+i} defaultValue="0"/>
                        </td>);
                    })}
                </tr>);
            })}
            </tbody>
        </table>

    );
};




const table = (props) => {
    return (
        <table className="customeTable tableInventory">
            <TableHead/>
            <tbody className="admin-list-table-body">
            {props.dayNames.map((index, value) => {
                return (<tr className="rowClickable" key={value}>
                    <th className="table_head" key={value}>{moment().format('YYYY-MM-DD') === index ? 'Today' : moment(index).format('dddd')}</th>
                    {[...Array(24).keys()].map((i) => {
                      {[...Array(7).keys()].map((j) => {
                          return (<td className="tableCells" key={i}>
                            <input type="text" className="inputBox" value={(props.availabilities) ? props.availabilities[i] : '0'} onChange={e =>props.textInput(e)} data-id={index+'_'+i} defaultValue="0"/>
                        </td>);
                      })}
                    })}
                </tr>);
            })}
            </tbody>
        </table>

    );
};