CODEWITHSUNDEEP
reactjs
SadFrodo
SadFrodo

Reputation: 345

React setState doesn't update the state after submitting input form

I am new in React and want to develop easy app - there is input field from which I want to take values and render list. After added option in text field I want to update this list whith new option. setState function does not work and I don't know how to connect input submit and list rendering. My code is below.

WaterApp.js

    import React from 'react';
    import AddWater from './AddWater';
    import WaterElements from './WaterElements';

    export default class WaterApp extends React.Component {
        state = {
            quantities: ['aaaaa', 'bbbbb', 'ccccc']
        };

handleAddQuantity = (quantity) => {
    this.setState(() => ({
        quantities: ['ddddd', 'eeeee']
    }));
    console.log('works');
}
render() {
    return (
        <div>
            <WaterElements quantities={this.state.quantities} />
            <AddWater handleAddQuantity={this.handleAddQuantity} />
        </div>
    )
}
    }

AddWater.js

    import React from 'react';

    export default class AddWater extends React.Component {
        handleAddQuantity = (e) => {
            e.preventDefault();
            const quantity = e.target.elements.quantity.value;
            console.log(quantity);
};
render() {
    return (
        <form onSubmit={this.handleAddQuantity}>
            <input type="text" name="quantity" />
            <input type="submit" value="Submit" />
        </form>
    )            
}
    }

WaterElements.js

    import React from 'react';

    const WaterElements = (props) => (
<div>
    <p>Water Quantity:</p>
    {
        props.quantities.map((quantity) => 
            <p key={quantity}>{quantity}</p>
        )
    }
</div>
    );

    export default WaterElements;

I expect list to be ddddd, eeeee at this moment.

Upvotes: 1

Views: 721

Answers (3)

Mohammed Al-Reai
Mohammed Al-Reai

Reputation: 2786

to update use this format 

this.state({key:value});
not  this.state(()=>{key:value});

handleAddQuantity = (quantity) => {
    this.setState({
        quantities: ['ddddd', 'eeeee']
    }));
    console.log('works');
}

Upvotes: 0

antho39
antho39

Reputation: 78

this.setState(() => ({
    quantities: ['ddddd', 'eeeee']
}));

should be 

this.setState({
    quantities: ['ddddd', 'eeeee']
});

and after for add 

this.setState({
    quantities: [...state.quantities, quantity]
});

Upvotes: 0

Dupocas
Dupocas

Reputation: 21297

You're never calling props.handleAddQuantity

export default class AddWater extends React.Component {
    handleAddQuantity = (e) => {
        e.preventDefault();
        const quantity = e.target.elements.quantity.value;
        props.handleAddQuantity(quantity)
};
render() {
    return (
        <form onSubmit={this.handleAddQuantity}>
            <input type="text" name="quantity" />
            <input type="submit" value="Submit" />
        </form>
    )            
}

Upvotes: 2

Related Questions