How to create an array based on multiple inputs

Question

I am trying create an array with some objects in it, Im trying to gather the data from multiple inputs. I am creating a restaurant Menu, where I will have different titles such as Breakfasts, Entrees... and under each title I will have different plates.

Im trying to create an array like this:

menu: [
 [ 'Lunch', 
   [{plate: 'Rice and Beans', description: 'Rice and Beans for Lunch', price: 50.49 }]
 ]
 [ 'Dinner', 
   [{plate: 'Some Dinner', description: 'Dinner Description', price: 35.49 }]
 ]
]

The question is, how do I add first a Title, and under that title how do I add plates?

Answer 1

I also wanted to know how to make it, so I made it for practice. I hope it helps.

import React from 'react';

class MenuInput extends React.Component {

    render() {
        const {id, handleInput} = this.props;
        return (
            <div>
                Title : <input name="title" onChange={(e) => handleInput(id, e)}/>
                Plate : <input name="plate" onChange={(e) => handleInput(id, e)}/>
                Description : <input name="description" onChange={(e) => handleInput(id, e)}/>
                Price : <input  name="price" onChange={(e) => handleInput(id, e)}/>
            </div>
        )
    }
}

export default class Menu extends React.Component {

    state = {
        inputCount: 1,
        inputData: [[]],
        result: []
    }

    saveData = (e) => {
        const {inputData, result} = this.state;
        inputData.forEach(input => {
            const {title, plate, description, price} = input;
            const findInputIndex = result.findIndex(data => data.indexOf(title) >= 0);
            if (findInputIndex >= 0) {
                const [menuName, menuList] = result[findInputIndex];
                result[findInputIndex] = [menuName, [...menuList, {plate, description, price}]]
            } else {
                result.push([title, [{plate, description, price}]])
            }
        });
        this.setState({
            result
        })
    }

    handleInput = (id, e) => {
        const {name, value} = e.target;
        const {inputData} = this.state;
        inputData[id] = {...inputData[id], [name]: value};
        this.setState({
            inputData
        })
    }

    addInput = () => {
        const {inputCount, inputData} = this.state;
        this.setState({
            inputCount: inputCount + 1,
            inputData: [...inputData, []]
        })
    };

    getInputList = () => {
        const {inputCount} = this.state;
        let inputList = [];
        for (let i = 0; i < inputCount; i++) {
            inputList.push(<MenuInput id={i} key={i} handleInput={this.handleInput}/>)
        }
        return inputList
    }

    render() {
        const {result} = this.state;
        console.log(result)
        return (
            <div>
                {this.getInputList()}
                <button onClick={this.addInput}>Add Plate</button>
                <br/>
                <button onClick={this.saveData}>save</button>
                {
                    result.length > 0 && result.map(res => {
                        const [menuName, menuList] = res;
                        return (
                            <div key={menuName}>
                                <strong>Title : {menuName}</strong>
                                {menuList.map(menu => {
                                    const {plate, description, price} = menu;
                                    return(
                                        <div key={plate}>
                                            <span style={{marginRight : '10px'}}>plate : {plate}</span>
                                            <span style={{marginRight : '10px'}}>description : {description}</span>
                                            <span>price : {price}</span>
                                        </div>
                                    )
                                })}
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}