0

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>
        )
    }
}

1 Answer 1

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!

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.