ReactJS set dynamic input value based on Object

Question

I have an Object like this:

And an object like this:

const subjectQuantities = {
      9: 2,
      11: 1,
    };

Where 9 and 11 are similar to the object id of first Object what I want to do is set the value of an input field dynamically so what I did is this:

{ Object.keys(subjects).map((item, i) => (
   <li className="travelcompany-input clearfix" key={i}>
      <span className="input-label">{ subjects[item].name }</span>
         <div className="input-group">
           { subjects[item].id in subjectQuantities ?
            <input className="form-control form-travelcompany-input" type="text" value=*DYNAMIC VALUE* min="0" max="10" />
             : <p>TEST</p>
             }
         </div>
   </li>
))}

How do I set the value of this input field dynamically based on the value of the subjectQuantities object.

maybe you want to use a defaultValue prop in the input element? — aabilio
– aabilio, Commented Nov 25, 2016 at 12:53

Blakey · Accepted Answer · 2016-11-25 12:54:45Z

1

If i understand your question correctly you just need to do {subjectQuantities[item]}

See your example below.

{ Object.keys(subjects).map((item, i) => (
   <li className="travelcompany-input clearfix" key={i}>
      <span className="input-label">{ subjects[item].name }</span>
         <div className="input-group">
           { subjects[item].id in subjectQuantities ?
            <input className="form-control form-travelcompany-input" type="text" value={subjectQuantities[item]} min="0" max="10" />
             : <p>TEST</p>
             }
         </div>
   </li>
))}

answered Nov 25, 2016 at 12:54

Blakey

8537 silver badges15 bronze badges

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

2 Comments

Sireini Over a year ago

I did it like this: value={this.subjectQuentaties[item]} why is it without this?

Dmytro Vyprichenko Over a year ago

value={subjectQuantities[subjects[item].id]}

Collectives™ on Stack Overflow

ReactJS set dynamic input value based on Object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related