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

score 2 · Answer 1 · edited Feb 15 '20 at 15:14

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 '20 at 15:14

Alex

206
2
10

answered Feb 15 '20 at 14:40

Prakash Reddy Potlapadu

891
1
8
14

score 1 · Accepted Answer · answered Feb 15 '20 at 15:08

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 '20 at 15:08

Prashant Gupta

776
7
9

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... – emmip Feb 15 '20 at 22:01
@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 https://stackoverflow.com/a/58339902/6181916 – Prashant Gupta Feb 17 '20 at 15:38

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

2 Answers2