Блог

Я новичок в react, и я застрял в одном из своих упражнений: я должен отображать максимальное количество голосов с определенным индексом массива. Как я могу это сделать?

импортируйте React, {useState } из ‘react’ импортируйте ReactDOM из ‘react-dom’

 const App = (props) => {
  const [selected, setSelected] = useState(0)
  const [points, setPoints] = useState([0,0,0,0,0,0]);
 
 
 const showRandom= () => {
    const change = () => Math.floor(Math.random() * anecdotes.length);
    setSelected(change)
  }

  const setVote=()=>{
    const copy = { ...points };// copy the last state 
    copy[selected]  = 1; //increase by 1 on the selected points
    setPoints(copy); // setting in setpoints the clicked values
    console.log('after update',points)
    
  }

  
 

  return (
    <div>
      {props.anecdotes[selected]}<br/>
      has {points[selected]} votes <br/>
      <button onClick={showRandom}>next anecdotes</button>
      <button onClick={setVote}>Vote</button>
      <h2>Anectodes with most vote:</h2><br/>
      
    </div>
  )
}


const anecdotes = [
  'If it hurts, do it more often',
  'Adding manpower to a late software project makes it later!',
  'The first 90 percent of the code accounts for the first 90 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
  'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
  'Premature optimization is the root of all evil.',
  'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.'
]

ReactDOM.render(
  <App anecdotes={anecdotes} />,
  document.getElementById('root')
)
  
  
  
  

const copy = { …точки } это неправильно
, это будет const copy = […points ]
потому что points — это массив
и использовать только anecdotes или props.anecdotes, а не оба

 import React, { useState } from 'react';
const App = ({anecdotes}) => {
  const [selected, setSelected] = useState(0)
  const [points, setPoints] = useState([0,0,0,0,0,0]);
 const showRandom= () => {
    const change = () => Math.floor(Math.random() * anecdotes.length);
    setSelected(change)
  }
  const setVote=()=>{
    const copy = [...points];// copy the last state 
    copy[selected]  = 1; //increase by 1 on the selected points
    setPoints(copy); // setting in setpoints the clicked values

  }

  const renderMostVote = () => {
    const maxVote = Math.max(...points); // get the maximum point

    // at first all one will have 0 vote
    if (maxVote === 0) return null;

    // in case multiple Anectodes have same number of max vote
    const maxList = [];
    points.forEach((el, index) => {
      if ( el === maxVote ) maxList.push(index);
    });

    // if just one Anectodes can get max vote then it will be:
    // points.findIndex(el => el === maxVote)

    return maxList.map((el, index) => (
      <p key={index} > {anecdotes[el]} -- with {points[el]} vote </p>
    ))

  }

  return (
    <div>
      {anecdotes[selected]}<br/>
      has {points[selected]} votes <br/>
      <button onClick={showRandom}>next anecdotes</button>
      <button onClick={setVote}>Vote</button>
      <div>
       <h2> Anectodes with most vote: </h2>
       {renderMostVote()}
      </div>
    </div>
  )
}
export default App;