React JS - How to add value from state to specific element

Question

Hey guys, i am working on a germany game called Kniffel. Its basically dice game.

So I am currently saving final score from thrown dice as State.

And then i would like to take that score from state and when i click a button it will save the score to specific element.

You can imagine it more when you check the code.

/* SAVING A SCORE TO STATE */
    const [totalValue, setTotalValue] = React.useState(0)
   /* HOW I GET IT */
    let total = 0

    React.useEffect(() => {

    dice.map(die => {
     if (die.isHeld) {
     total += die.value
    }

    })
    setTotalValue(total)
    }, [dice])

And i would like every time i click a button, the score from totalValue will pass to P element, where the button is located. Then a game is going to restart and next round you pass the score to different element.

There will me multiple score--inside divs, so i am thinking how should i approach this. Any help will be GOD!

if you guys have any ideas, let me know please.

UPDATE

I little bit change a code and made a another state with multiple scores:

// TOTAL
  const [totalValue, setTotalValue] = React.useState()

// TOTALS
const [totalValues, setTotalValues] = React.useState({
  ER1: 0,
  ER2: 0,
  ER3: 0,
  ER4: 0,
  ER5: 0,
  ER6: 0,
  Dreier: 0,
  Vierer: 0,
  Full: 0,
  Kleine: 0,
  Grobe: 0,
  Kniffel: 0,
  Chance: 0
})

Then i made a multiple functions, that will update the array.

function er1() {
  setTotalValues(prevState => {
    return {
      ...prevState,
      ER1: totalValue
    }
  })
}

function er2() {
  setTotalValues(prevState => {
    return {
      ...prevState,
      ER2: totalValue
    }
  })
}

function er3() {
  setTotalValues(prevState => {
    return {
      ...prevState,
      ER3: totalValue
    }
  })
}

.......etc

passing functions as props and passing them to buttons:

export default function Score({Score, Next, Values, er1, er2, er3}) {
    return (
        
        
            
                1ER:
                {Values.ER1}
                
            
        
    
            
                2ER:
                {Values.ER2}
                
            
            
                3ER:
                {Values.ER3}
                
            
        
    )
}

When i look up to this, it will work but its not efficient how i would like it. Any idea how to simplify this?

user_11468488 · Answer

You can have a state like passTo inside the score component. Then add a button click event listener that identifies the button clicked. You can selectively display value of Score inside correct

with condition

// import useState
export default function Score({Score}) {

 const [passTo, setPassTo] = useState()

const handleClick = (btnId) => {
   setPassTo(btnId);
}

    return (
        
            
                1ER:
                {passTo==='1ER' && Score}
                
            
            
                2ER:
                {passTo==='2ER' && Score}
                
            
            
                3ER:
                {passTo==='3ER' && Score}
                
            
        
        )
    }

To further simplify, if there would be multiple scores like '1ER', '2ER' etc, , you can put those in an array and map through that

   // import useState
    export default function Score({Score}) {
       const scoreArr = ['1ER', '2ER', '3ER'] //As many needed, can pass as props too.
       const [passTo, setPassTo] = useState()
       
        const handleClick = (btnId) => {
           setPassTo(btnId);
        }
        return (
                
                     
                          {scoreArr.map((score) => {
                                  return ( 
                                  
                                     `${score}:`
                                     {passTo===score && Score} 
                                               
                                     
                                  );
                   })}
               
                
                )
            }

Lemme know if it helps :)

user_13609832 · Answer

you can make a ScoreContainder component which contains the button and the

element

   export default function Score({id, score, setSelectedId, selectedId}){
       const onClick = ()=>{
           setSelectedId(id)
       }
       return 
                1ER:
                {id===selectedId && score}
                
            
   }

and in the parent component return this

     export const Parent(){
         const [totalValue, setTotalValue] = React.useState(0)
         const scoreRef = React.useRef(0)
         const [selectedId, setSelectedId] = React.useState()
         const getRandomnumber = ()=>{ // this causes rerender  
             scoreRef.current = Math.random() //or any other random funtion
             setTotalValue(scoreRef.current) 
         }
         const reset = ()=>{scoreRef.current = 0} //this won't cause rerender and reset the score value without showing the changes on the screen 
         return 
                
             
             
         
         
     }

user_13884255 · Answer

If you can keep multi numbers it should better keep in an object instead number

const [totalValues, setTotalValue] = React.useState({})

and only one method can handle all objects
onClick=({target})=>{
totalValues[target.name]=target.value;
}

it just needs your element name to be an identity

Finally you have this object {1ER:4,2ER:5,3ER:2,...}

this a sample

export const Score = () => {
  const [totalValues, setTotalValue] = useState({})
  const onClick = ({ target }) => {
    let randomScore = Math.floor(Math.random() * 6) + 1;
    totalValues[target.name] = randomScore;
    setTotalValue({...totalValues});
  }
  return (
    
      {totalValues['2ER']}
      
        1ER:
        {totalValues.ER1}
        
      
      
        2ER:
        {totalValues['ER2']}
        
      
      
        3ER:
        {totalValues['ER3']}
        
      
    
  );
};

React JS - How to add value from state to specific element

3 Answers