How do I call back to a class' state values in React?

user_16426507 0
Viewed 44

I'm making a catalog for an online store. At the end of my handleSave function, is there a way for me to call upon the values in the Admin class' state to reset the input fields for the user? My end goal is to reset the input on the page for the user. I'm not sure if I'm doing this wrong, I'm learning. Thanks! Here's my code.

class Admin extends Component {
    state = {
        id: "",
        price: 0,
        stock: 0,
        title: "",
        description: "",
        image: "",
        discount: 0,
        category: ""
      }
    render() { 
        return (
            <div className="adminPage">

                <label>id</label>
                <input type="text" name="id" value={this.state.id} onChange={this.handleInputChange}/>
                <br/>

                <label>Price</label>
                <input type="number" name="price" value={this.state.price} onChange={this.handleInputChange}/>
                <br/>

                <label>Stock</label>
                <input type="number" name="stock" value={this.state.stock} onChange={this.handleInputChange}/>
                <br/>

                <label>Title</label>
                <input type="text" name="title" value={this.state.title} onChange={this.handleInputChange}/>
                <br/>

                <label>Description</label>
                <input type="text" name="description" value={this.state.description} onChange={this.handleInputChange}/>
                <br/>

                <label>Image URL</label>
                <input type="text" name="image" value={this.state.image} onChange={this.handleInputChange}/>
                <br/>

                <label>Discount</label>
                <input type="number" name="discount" value={this.state.discount} onChange={this.handleInputChange}/>
                <br/>

                <label>Category</label>
                <input type="text" name="category" value={this.state.category} onChange={this.handleInputChange}/>
                <br/>

                <button className="btn btn-dark" onClick={this.handleSave}>Save Product</button>
            </div>
          );
    }

    handleInputChange = (event) => { //45 minutes left in class, rewatch this lecture tomorrow
        this.setState({ [event.target.name]: event.target.value });
    };

    handleSave = () => {
        this.setState({ title: "Changed from code..."});}
reactjs
2 Answers

Create a defaultState variable and assign it to the state once you save ,it will reset all the input values.

class Admin extends Component {
         defaultState={
            id: "",
            price: 0,
            stock: 0,
            title: "",
            description: "",
            image: "",
            discount: 0,
            category: ""
          }
        state = {...defaultState}
        render() { 
            return (
                <div className="adminPage">
    
                    <label>id</label>
                    <input type="text" name="id" value={this.state.id} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Price</label>
                    <input type="number" name="price" value={this.state.price} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Stock</label>
                    <input type="number" name="stock" value={this.state.stock} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Title</label>
                    <input type="text" name="title" value={this.state.title} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Description</label>
                    <input type="text" name="description" value={this.state.description} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Image URL</label>
                    <input type="text" name="image" value={this.state.image} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Discount</label>
                    <input type="number" name="discount" value={this.state.discount} onChange={this.handleInputChange}/>
                    <br/>
    
                    <label>Category</label>
                    <input type="text" name="category" value={this.state.category} onChange={this.handleInputChange}/>
                    <br/>
    
                    <button className="btn btn-dark" onClick={this.handleSave}>Save Product</button>
                </div>
              );
        }
    
        handleInputChange = (event) => { //45 minutes left in class, rewatch this lecture tomorrow
            this.setState({ [event.target.name]: event.target.value });
        };
    
        handleSave = () => {
            this.setState({...defaultState});
}
user_78495490

The following will reset the state:

this.setState({
  id: "",
  price: 0,
  stock: 0,
  title: "",
  description: "",
  image: "",
  discount: 0,
  category: ""
})

user_31625400
Related