如何在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>
   )
}

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

Answer 2

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