Question 184403 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Group of buttons rendered from list are not being re-rendered on click and their value returns undefined

I’m trying to create a difficulties setting where you can choose the difficulty from 4 options laid out in a group of buttons, I also want to put a border on the selected button and have the difficulty change on click, getting the difficulty from the value of the button. The problem is that the button isn’t changing on click and the value of it becomes undefined for some reason.

Here’s my code:

import { useState } from "react";
import { config } from "../config";

const difficulties: Difficulty[] = ["Easy", "Normal", "Hard", "Extreme"]

export default function DifficultySettingsComponent() {
  const [difficulty, setDifficulty] = useState(config.difficulty)

  function changeDificulty(event: any) {
    setDifficulty(event.target.value)
    config.difficulty = difficulty
  }

  return (
    <div>
      <h2 className="font-bold text-lg">Difficulty:</h2>
      <div className=" space-x-2 m-3">
        {difficulties.map((difficulty) => (
          <button className=" bg-zinc-400 px-3 py-2 border-black rounded-md"
            key={difficulty}
            onClick={changeDificulty}
            value={difficulty}
            style={{ borderWidth: difficulty == config.difficulty ? 2 : 0 }}
          >
            <p className="font-bold">{difficulty}</p>
          </button>
        ))}
      </div>
    </div>
  )
}

difficulty settings menu

If anyone could tell me how to correctly update the buttons I would really apreciate it.
Thanks!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I changed the button to an input type="button based on @Willow's answer and it now correctcly takes the value. I also had to change the if statement for the border and it worked, here's my new working code:

    import { useState } from "react";
import { config } from "../config";

const difficulties: Difficulty[] = ["Easy", "Normal", "Hard", "Extreme"]

export default function DifficultySettingsComponent() {
  const [currentDifficulty, setCurrentDifficulty] = useState(config.difficulty)

  function changeDificulty(event: any) {
    setCurrentDifficulty(event.target.value)
    config.difficulty = currentDifficulty
  }

  return (
    <div>
      <h2 className="font-bold text-lg">Difficulty:</h2>
      <div className=" space-x-2 m-3">
        {difficulties.map((difficulty) => (
          <input className=" bg-zinc-400 px-3 py-2 border-black rounded-md"
            type="button"
            key={difficulty}
            onClick={changeDificulty}
            value={difficulty}
            style={{ borderWidth: difficulty == currentDifficulty ? 2 : 0 }}
          />
        ))}
      </div>
    </div>
  )
}

  2. 0

    You’re using your button as though it was an input type="radio". The value of a button doesn’t do what you’re expecting.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

    In this scenario, you should probably aim to use radio buttons that are styled to look like buttons. It will be more in line with a regular form that way. For example, if you’re using Bootstrap, you can use "Toggle Buttons" https://getbootstrap.com/docs/5.0/forms/checks-radios/#toggle-buttons

    Hopefully this gives you a place to start!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search