score:1

Accepted answer
const button_Data = [
  {
    name: "Name",
    value: "name"
  },
  {
    name: "Class",
    value: "class"
  },
  {
    name: "Age",
    value: "age"
  },
  {
    name: "Subjects",
    value: "subjects"
  },
  {
    name: "School",
    value: "school"
  }
];
function Stddata(props) {
  const [activeButton, setActiveButton] = useState(button_Data[0].name);
  const handleClick = e => {
    const name = e.target.name;
    setActiveButton(name);
  };
  return (
    <div>
      {button_Data.map(item => {
        const className = activeButton === item.name ? "active" : "";
        return (
          <div key={item.value}>
            <button
              className={`btn btn-outline-secondary mb-1 form-control text-left ${className}`}
              name={item.name}
              value={item.value}
              onClick={handleClick}
            >
              {item.name}
            </button>
          </div>
        );
      })}
    </div>
  );
}

export default Stddata;

score:-2

<Btn style={styles.items} touch="on" onPress={props.getProductsRequest}>
               <Text  style={styles.itemTxt}> some thex</Text>
        </Btn>

score:3

{button_Data.map((item, index) => (
  <button 
    className={`btn ${activeButton === index ? 'btn-success' : null}`}  
    value={item.value} 
    onClick={ () => {setActiveButton(index)} }
  >

    {item.name}

  </button>
))}


Related Query

More Query from same tag