How to add attribute name and attribute value dynamically in React

Question

I want to set value="a" depending on the condition it meets. Button has no value attribute currently. How do I write this?I want like this <button value="a"> One </button>

const buttonValues = ["a", "b"]  

const addingValuesToButtons = () => {
   for (var i = 0; i < buttonValues.length; i++) {
      if(buttonValues[i] === "a") {
         //add attribute name and value to first two buttons
      }
      if(buttonValues[i] === "b"){
         //add attribute name and value to first three buttons
      }
   };

   return(
     <div>
      <button> One </button>
      <button> Two </button>
      <button> Three </button>
      <button> Four </button>
     </div>
   )
}

Use if(i<2) { instead.

Bhojendra Rauniyar
– Bhojendra Rauniyar

2018-08-13 07:55:59 +00:00
Commented Aug 13, 2018 at 7:55 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Aug 13, 2018 at 7:55

mwl · Accepted Answer · 2018-08-13 08:43:53Z

1

const buttonValues = ["a", "b"]  

const addingValuesToButtons = () => {
   const buttons = [];
   for (var i = 0; i < buttonValues.length; i++) {
      if(buttonValues[i] === "a") {
         buttons.push({attr: 'foo', name: 'bar'});
      }
      if(buttonValues[i] === "b"){
         buttons.push({attr: 'baz', name: 'bar2'})
      }
   };

   return(
     <div>
      {buttons.map(button => {
        return <button attr={button.attr}>{button.name}</button>;
      })}
     </div>
   )
}

edited Aug 13, 2018 at 8:43

answered Aug 13, 2018 at 7:56

mwl

1,47814 silver badges19 bronze badges

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

1 Comment

mwl Over a year ago

yep, there was a missing closing bracket in map - sorry ;)

Anil Kumar · Accepted Answer · 2018-08-13 08:02:02Z

0

It will go like this:

<button value={this.buttonValues[0] == 'a'?this.buttonValues[0]:null}> One </button>

another netter approach is :

const buttonValues = [{value:"a",name:"One"}, {value:"b",name:"two"}]  

this.buttonValues.map(value => {<button value={value.value == 'a'? value.value:null}>{value.name}</button>}) ;

answered Aug 13, 2018 at 8:02

Anil Kumar

2,3192 gold badges18 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to add attribute name and attribute value dynamically in React

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related