CODEWITHSUNDEEP
reactjs
Dean Arvin
Dean Arvin

Reputation: 115

Can we use a button to update value of state?

My apologies for such a menial question but I've been stuck on this for some time. I'm looking to create a few buttons that contain a value. Once clicked, that value is then passed to state. Here's what I'm working with:

export function ExperienceLevel() {
    const [experience, setExperience] = useState(["test"])
    
    const toggleExperience = (event) => {
        setExperience(event.target.value)
    }

    return(
        <div className="experienceContainer">
            <p>{experience}</p>
            <button onClick={toggleExperience} value="one"/>
            <button onClick={toggleExperience} value="two"/>
            <button onClick={toggleExperience} value="three"/>
            <input onClick={toggleExperience} type="radio" value="oneB" />
        </div>
    )
}

I've included a radio input containing the same parameters and it works to update state, but not with the buttons. Is this even possible or am I doing something wrong?

Upvotes: 0

Views: 38

Answers (3)

Fatema Tuz Zuhora
Fatema Tuz Zuhora

Reputation: 3746

export function ExperienceLevel() {
    const [experience, setExperience] = useState('test')

    const toggleExperience = (value) => {
        setExperience(value)
    }

    return (
        <div className="experienceContainer">
            <p>Current Experience: {experience}</p>
            <input type="button" onClick={()=>toggleExperience('one')} value="one" />
            <input type="button" onClick={()=>toggleExperience('two')} value="two" />
            <input type="button" onClick={()=>toggleExperience('three')} value="three" />
            <input type="radio" onClick={()=>toggleExperience('oneB')} value="oneB" />
        </div>
    )
}

Upvotes: 0

Naren
Naren

Reputation: 4480

Certainly you can use button value as well as radio.

export function ExperienceLevel() {
    const [experience, setExperience] = useState("test")
    
    const handleExperience = (event) => {
        setExperience(event.target.value)
    }

    return(
        <div className="experienceContainer">
            <p>{experience}</p>
            <button onClick={handleExperience} value="one">Change to One</button>
            <button onClick={handleExperience} value="two">Change to Two</button>
            <button onClick={handleExperience} value="three">Change to Three</button>
            <input onClick={handleExperience} type="radio" value="oneB">Change to One B
        </div>
    )
}

Upvotes: 1

Guichi
Guichi

Reputation: 2343

export function ExperienceLevel() {
  const [experience, setExperience] = useState(['test'])

  const toggleExperience = (value) => {
    setExperience(value)
  }

  return (
    <div className="experienceContainer">
      <p>{experience}</p>
      <button onClick={()=>toggleExperience('one')}  />
      <button onClick={()=>toggleExperience('two')}  />
      <button onClick={()=>toggleExperience('three')}  />
      <input onClick={()=>toggleExperience('oneB')} type="radio"  />
    </div>
  )
}

Upvotes: 1

Related Questions