My component (app) not rendering input from a child component(InputForm)

Question

I have a parent component App rendering a list of new restaurants from a child component InputForm.

I have a addedrestaurant state inside App and a handler to save the input from a callback props passed to the child component InputForm.

I have console.log the restaurant attribute in the InputForm component, it is always empty even if I have user input in the form and have handlers for change in the component.

class App extends React.Component {

    constructor(props) {
        super(props)
        this.handlerestaurantclick = this.handlerestaurantclick.bind(this)
        this.saveRating = this.saveRating.bind(this)
        this.saveRestaurant = this.saveRestaurant.bind(this)
        this.state = {
            restaurants: restaurants,
            addedrestaurants: [],
            showcomponent: false,
            restaurantClicked: -1,
        }
    }

    saveRestaurant(restaurant) {
        this.setState(
            (prevState) => {
                let resto = prevState.addedrestaurants; 
                resto.push(restaurant); 
                return { resto };
            })

        console.log("after:" + this.state.addedrestaurants)
    }

    render() {
        return <Inputform onSave={this.saveRestaurant} />
    }

}

class Inputform extends React.Component {

    constructor(props) {
        super(props);
        this.handlechange = this.handlechange.bind(this);
        this.handleSave = this.handleSave.bind(this);
        this.state = {
            restaurant: Object.assign({}, Init_value),
            error: {}
        }
    }

    handlechange(e) {
        const name = e.target.name;
        const value = e.target.value;
        this.setState((prevState) => {
            prevState.restaurant[name] = value;
            return { restaurant prevState.restaurant };
        })
    }

    handleSave = (e) => {
        this.props.onSave(this.state.restaurant);
        this.setState({
            restaurant: Object.assign({}, Init_value),
            error: {}
        })
        e.preventDefault()
    }
    render() {
        return (
            <form className="inputform">
                <div>

                    <h4>
                        Add new Restaurant
                        <FontAwesomeIcon icon={faBars} />
                    </h4>

                </div>

                <div className="inputcontainer ">

                    <input className="InputItem restaurant-name" type="text" name="restaurantName" placeholder="Name" value={this.state.restaurant.restaurantName} onChange={this.handlechange} />
                </div>
                <div className="inputcontainer adress">
                    <textarea className="InputItem" name="address" rows="4" cols="18" placeholder="Adress" value={this.state.restaurant.address} onChange={this.handlechange}>

                    </textarea>

                </div>

                <div className="inputcontainer rating">
                    Rating
                    <select >
                        <option> </option>
                        <option >0 </option>
                        <option >1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option><option>5</option>
                    </select>
                </div>

                <div className="inputcontainer">
                    <textarea className="InputItem" rows="4" cols="18" placeholder="comment">                </textarea>
                </div>

                <input className="inputitem submitbutton" type="submit" value="submit" onClick={this.handleSave} />
            </form>
        )
    }
}

Answer 1

You made couple of mistakes. I have mention it in the below code as @cluemediator Fixed.

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
class App extends React.Component {

    constructor(props) {
        super(props)
        // @cluemediator Fixed: Remove both line because method is not exist.
        // this.handlerestaurantclick = this.handlerestaurantclick.bind(this)
        // this.saveRating = this.saveRating.bind(this)
        this.saveRestaurant = this.saveRestaurant.bind(this)
        this.state = {
            restaurants: [], // @cluemediator Fixed: remove "restaurants" because "restaurants" is not defined.
            addedrestaurants: [],
            showcomponent: false,
            restaurantClicked: -1,
        }
    }

    saveRestaurant(restaurant) {
        this.setState(
            (prevState) => {
                let resto = prevState.addedrestaurants; resto.push(restaurant); return { resto };
            })

        console.log("after:" + this.state.addedrestaurants)
    }

    render() {
        return <Inputform onSave={this.saveRestaurant} />
    }

}

class Inputform extends React.Component {

    constructor(props) {
        super(props);
        this.handlechange = this.handlechange.bind(this);
        this.handleSave = this.handleSave.bind(this);
        const Init_value = {};  // @cluemediator Fixed: define variable because it's used at below
        this.state = {
            restaurant: Object.assign({}, Init_value),
            error: {}
        }
    }

    handlechange(e) {
        const name = e.target.name;
        const value = e.target.value;
        this.setState((prevState) => {
            prevState.restaurant[name] = value;
            return { restaurant: prevState.restaurant }; // @cluemediator Fixed: Add colon symbol
        })
    }

    handleSave = (e) => {
        this.props.onSave(this.state.restaurant);
        this.setState({
            restaurant: Object.assign({}, Init_value),
            error: {}
        })
        e.preventDefault()
    }
    render() {
        return (
            <form className="inputform">
                <div>

                    <h4>
                        Add new Restaurant
                        <FontAwesomeIcon icon={faBars} />
                    </h4>

                </div>

                <div className="inputcontainer ">

                    <input className="InputItem restaurant-name" type="text" name="restaurantName" placeholder="Name" value={this.state.restaurant.restaurantName} onChange={this.handlechange} />
                </div>
                <div className="inputcontainer adress">
                    <textarea className="InputItem" name="address" rows="4" cols="18" placeholder="Adress" value={this.state.restaurant.address} onChange={this.handlechange}>

                    </textarea>

                </div>

                <div className="inputcontainer rating">
                    Rating
                    <select >
                        <option> </option>
                        <option >0 </option>
                        <option >1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option><option>5</option>
                    </select>
                </div>

                <div className="inputcontainer">
                    <textarea className="InputItem" rows="4" cols="18" placeholder="comment">                </textarea>
                </div>

                <input className="inputitem submitbutton" type="submit" value="submit" onClick={this.handleSave} />
            </form>
        )
    }
}

render(<App />, document.getElementById("root"));

Hope this will work for you!