Hi Elisabeth! I'm non-native english speaker so please bear with me. I review your code and it seems like you are a beginner in React but I assume you know **"props"** and **"state"**. First let's identify what is the problem. "I cannot select just only one although i used useState and other methods. Once clicked every button is selected." The buttons are working fine, the problem is that the class "selected" applies to all buttons because of the conditional statement in the className. `className={isActive ? "selected" : ""}` In your code, isActive is a boolean which you set to true if "any" button is clicked, so all the buttons have the class 'selected' applied to it. To fix this, use the selectedNumber state instead. `className={selectedNumber === '1' ? 'selected' : ''} //the class will only apply to the button which holds the value 1` You are also passing the whole event object in setSelectedNumber and you only use extract the value in the

tag. ``` const handleClick = (numberSelected) => { setSelectedNumber(numberSelected) }

You selected {selectedNumber.target.value} out of 5

``` To fix this, you should extract the value and pass it in the setSelectedNumber. ``` const handleClick = (event) => { const value = event.target.value setSelectedNumber(value ) }

You selected {selectedNumber} out of 5

``` The snippets above should be able to fix the problem. Now to help you clean your code, I have written the snippets below. **This might be too long so you can just paste it in your code and then review it.** In your Rating component, you initialize the selectedNumber as a number which value is 0. `const [selectedNumber, setSelectedNumber] = useState(0);` When you get the value from the event object, any value will be converted to a string. So you can just initialize it with an empty string. `const [selectedNumber, setSelectedNumber] = useState("");` Then you can remove the isActive state because we will be using the selectedNumber to add the "selected" class. You also have to change the handleSubmit function. Your code should look like this ``` const [selectedNumber, setSelectedNumber] = useState(") const [success, setSuccess] = useState(false) const handleClick = event => { setSelectedNumber(event.target.value) } const handleSubmit = () => { // you can just check the length we initialize selectedNumber as a string. if (selectedNumber.length === 0) { alert('Please select a rating!') } else { setSuccess(true) } } ``` You can also remove this line of codes since this is not the proper way to write inline styles in react. ``` let rating_app = document.querySelector('.rating_app') let submit_btn = document.querySelector('.submit-btn') rating_app.style.display = 'none' submit_btn.style.display = 'none' ``` You can directly apply it to the element without having to use a querySelector. ``` let successComponent = null if (success) { successComponent = (

You selected {selectedNumber} out of 5

Thank you !

We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!

) } ``` Then in the return statement, we will use a ternary operator to render either successComponent or the rating div. **Note:** I remove the key and id attribute in your button because it is not needed in this solution. ``` return (

{success ? (

{successComponent}

) : ( <>

How did we do ?

Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!

)}

``` You can also store the values that you are going to use in the buttons in an array and then map it's value. ``` const btnArrays = ['1', '2', '3', '4', '5'].map((value, index) => { return (

) }) ``` Then use it to render the buttons. ``` return (

{success ? (

{successComponent}

) : ( <>

How did we do ?

Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!

{btnArrays}

)}

) ``` You can also separate the successComponent and btnsArray into another component. Then pass down the values you wish to pass to the component as props, remember that the Rating component holds the states. *ButtonComponents.jsx* ``` const btnArrays = ['1', '2', '3', '4', '5'] const ButtonComponent = ({ selectedNumber, handleClick }) => { return btnArrays.map((value, index) => { return (

) }) } export default ButtonComponent ``` *SuccessComponent.jsx* ``` const SuccessComponent = ({ img, selectedNumber }) => { return (

You selected {selectedNumber} out of 5

Thank you !

We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!

) } export default SuccessComponent ``` Then your Rating component should look like this. *Rating.jsx* ``` import { useState } from 'react' import icon from '../assets/images/icon-star.svg' import img from '.././assets/images/illustration-thank-you.svg' import '../App.css' import ButtonComponent from './ButtonComponent' import SuccessComponent from './SucessComponent' const Rating = () => { const [selectedNumber, setSelectedNumber] = useState('') const [success, setSuccess] = useState(false) const handleClick = event => { setSelectedNumber(event.target.value) } const handleSubmit = () => { if (selectedNumber.length === 0) { alert('Please select a rating!') } else { setSuccess(true) } } return (

{success ? ( ) : ( <>

How did we do ?

Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!

{ }

)}

) } export default Rating ``` and finally, your App.jsx should not have any state, since your declare those in the Rating component. ``` import { React, useState } from 'react' import Rating from './components/Rating.jsx' import './App.css' function App() { //const [success, setSuccess] = useState(true); //const [selectedNumber, setSelectedNumber] = useState(0); return ( <> ) } export default App ``` ***You can copy and paste all those snippets since I tested it first.***

nicodes

All solutions

react | tailwindcss | typescript

typescript | tailwindcss

react | tailwindcss

react | tailwindcss

html | css | js | tailwindcss

html | css | tailwindcss