Pass multiple state values into an input with React

Question

Somewhat new to react and having trouble passing multiple state values to an input.

Specifically, state from drop-down menus. I can accomplish this in a p tag by chaining the various state values together.

This works

   <p> 
    {this.state.one}_
    {this.state.two}_
    {this.state.three}_
    {this.state.four}_
    {this.state.five}
    </p>

This will return

one_two_three_four_five

Whenever I try to pass these same values into a single input I get an error.

This does not work

<label>
  Title:
  <input 
value=
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
 type="text" /> 
</label>

How can one pass multiple state values into a single input?

devserkan · Accepted Answer · 2018-05-13 21:33:56Z

2

Template literals with variables :

<input 
        value={ `${this.state.one}_${this.state.two}` }
/>

answered May 13, 2018 at 21:33

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

Comments

SrThompson · Accepted Answer · 2018-05-13 21:33:47Z

1

You have to pass a single expression to the value attribute. Change to this:

<label>
  Title:
  <input value={`${this.state.one}_
    ${this.state.two}_
    ${this.state.three}_
    ${this.state.four}_
    ${this.state.five}`
 }
 type="text" /> 
</label>

Note: this is ES6 string interpolation. The ES5 alternative is the regular string concatenation with "+"

answered May 13, 2018 at 21:33

SrThompson

5,7582 gold badges20 silver badges25 bronze badges

Collectives™ on Stack Overflow

Pass multiple state values into an input with React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related