CODEWITHSUNDEEP
javascriptreactjs
Deke
Deke

Reputation: 4649

How to add attribute name and attribute value dynamically in React

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

Upvotes: 0

Views: 55

Answers (2)

mwl
mwl

Reputation: 1488

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

Upvotes: 1

Anil Kumar
Anil Kumar

Reputation: 2309

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

Upvotes: 0

Related Questions