When returning jsx using Map it is giving undefined as a result

Question

arrToAdd = 
[
    { id:"firstname", className:"input-sm", type:"text", name:"firstname", title:"Enter first name", placeholder:"First name" },
    { id:"lastname", className:"input-sm", type:"text", name:"lastname", title:"Enter last name", placeholder:"Last name" }
]

inputArr = [ this.arrToAdd ];

state = {
    modal13: false,
    name: '',
    status: false,
    radio: 2,
    inputArray : this.inputArr
}

showInput = this.state.inputArray.map( (value1) => {
    value1.map( (value) => {

        return (
            <input id={value.id} className={value.className} type={value.type} name={value.name} title={value.title} placeholder={value.placeholder} />
        );
    });

});

addMoreFields = () => {

    console.log(this.showInput); // Giving Undefined

    this.setState({
        ...this.state,
         inputArray : this.inputArr.push(this.arrToAdd) 
        });

    console.log(this.showInput); // Giving Undefined
}

Answer 1

Merge your array, don't push otherwise it will be array of array

this.setState({
    ...this.state,
     inputArray : [inputArray, ...this.arrToAdd] 
    });

Answer 2

showInput = this.state.inputArray.map( (value1) => {
        let newArr = value1.map( (value) => {
            console.log(value);
            return (
                <input id={value.id} className={value.className} type={value.type} name={value.name} title={value.title} placeholder={value.placeholder} />
            );
        });

        return newArr ;

    });

Answer 3

Not sure why you want to put arrToAdd into inputArray but this should be what you want

showInput = this.state.inputArray[0].map((value1) => {
    return (
        <input id={value.id} className={value.className} type={value.type} name={value.name} title={value.title} placeholder={value.placeholder} />
    );
});

Or directly change your state assignment to: inputArray : this.arrToAdd