ReactJS: How to display selected value from dropdown in input fields?

Question

I am trying to do following:

The user can select a calculation from the dropdown menu. The selected numbers(from calculation) appear in the input fields and the user can change the calculation. The modified calculation is displayed after pressing the "Add" button. Also the modified calculation should shown in red color in the dropdown menu.

I managed to get the calculation right, but the selected numbers doesn't appear in the input fields. What I have to do to update the values to the input fields?

Here is my code:

import React from 'react';

export default class Lisatehtava1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num1: 0,
            num2: 0,
            total: 0,
            results: [],
        }
    }

    handleChange = (e) => {
        const { name, value } = e.target;
        this.setState({
            [name]: value
        })
    }


    add = () => {

        const { num1, num2 } = this.state;

        this.setState({
            total: (parseInt(num1) + parseInt(num2))

        }, () => {

            let result = { num1: this.state.num1, num2: this.state.num2, total: this.state.total };

            const t = [...this.state.results, result];

            this.setState({ results: t }, () => {
                this.setState({ num1: "" }, () => {
                    this.setState({ num2: "" });

                });
            });
        })
    }

    render() {

        let dropdown = this.state.results.map((item, id) => {
            return <option key={id}>{item.num1} + {item.num2} = {item.total}</option>
        });

        return (
            <div>
                <div>
                    <label>Numero 1</label>
                    <input type="text" name="num1" onChange={this.handleChange} />
                </div>
                <div>
                    <label>Numero 2</label>
                    <input type="text" name="num2" onChange={this.handleChange} />
                </div>
                <button onClick={this.add}>Add</button>
                <div><select onChange={this.handleChange}>{dropdown}</select></div>
            </div>
        );
    }
}

Alex · Accepted Answer · 2020-02-15 15:14:06Z

2

<input type="text" name="num2" onChange={this.handleChange} />

Here in the input, you are not assigning the value you get after calling onChange function. So it's always empty.

Write it as:

<input type="text" name="num2" onChange={this.handleChange} value={this.state.num1} />

edited Feb 15, 2020 at 15:14

Alex

2162 silver badges10 bronze badges

answered Feb 15, 2020 at 14:40

Prakash Reddy Potlapadu

1,0111 gold badge9 silver badges16 bronze badges

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

Comments

Prashant Gupta · Accepted Answer · 2020-02-15 15:08:38Z

1

There are a few things you have to change.

1.In the input tag you must include a value attibute

<input type="text" name="num1" onChange={this.handleChange} value={this.state.num1} />

similar to 2nd input tag

2.You can use split on the value from the select tag event.

<select onChange={(e)=>{
                      this.setState({
                        num1:e.target.value.split(" ")[0],
                         num2:e.target.value.split(" ")[2]
                      })
                }}>{dropdown}</select>

You can check out live example https://stackblitz.com/edit/react-fm8wd4

answered Feb 15, 2020 at 15:08

Prashant Gupta

7967 silver badges9 bronze badges

2 Comments

emmip Over a year ago

I am still struggling with that styling: modified calculation should shown in red color in the dropdown menu. Should I use conditional styling in styled components? I have no clue how to do it. Sorry for the simple questions. I am just a beginner...

Prashant Gupta Over a year ago

@emmip yes, you should use conditional styling. Make 2 different styles for the dropdown and add a condition where you want to show it. You can refer to this stackoverflow.com/a/58339902/6181916

Collectives™ on Stack Overflow

ReactJS: How to display selected value from dropdown in input fields?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related