Dans React Hooks. Comment définir l'état sur un nombre aléatoire et l'utiliser pour afficher une chaîne à partir d'un tableau

Ainsi, votre composant d'application reçoit les citations, affiche déjà le devis actuel et, en fonction de la sélection, vous souhaitez avoir un nouveau devis.

La seule chose que vous devez faire est d'ajouter un bouton qui modifie le valeur sélectionnée via setSelected comme ceci; https://codesandbox.io/s/hungry-dream-4b3eg p >

Le hook useState vous fournit 2 arguments, le premier est de lire votre état, le second est de écrire votre état.

Je ne vais pas tout gâcher puisque vous suivez un cours :) Alors faites le nombre aléatoire, peut-être avec une méthode supplémentaire, et vous aurez votre comportement attendu.

const App = props => {
  const [selected, setSelected] = useState(0);

  return (
    <div>
      <button onClick={() => setSelected(4)}>change quote</button> // <=== this addition
      {props.anecdotes[selected]}
    </div>
  );
};

Tout ce dont vous avez besoin est de générer un nombre aléatoire entre 0 et la longueur -1 du tableau d'anectodes.

const App = ({anecdotes}) => {
  const [selected, setSelected] = useState(0)

  const handleClick = () => {
      const randomNumber = Math.floor(Math.random() * anecdotes.length);
      setSelected(randomNumber);
  }

  return (
    <div>
      <button onClick={handleClick} >Get Random</button>
      {anecdotes[selected]}
    </div>
  )
}

https://codesandbox.io/s/blissful-hofstadter-mr01k

Solution de hooks pour choisir une valeur aléatoire dans le tableau

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Example(props) {

  const [count, setCount] = useState(0);

  const { anecdotes } = props;
  return (
    <div>
      <p>You clicked and random value from array: <h4>{count}</h4></p>
      <button onClick={() => setCount(anecdotes[Math.floor(Math.random()*anecdotes.length)])}>
        Click me
      </button>
    </div>
  );
}
ReactDOM.render(
  <Example  anecdotes={[1,4,3,2,8,5]}/>,
  document.getElementById('root')
);

Hooks pour choisir une valeur aléatoire dans le tableau

Composant aléatoire:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import Random from "./showRandom";
function App() {
  return (
    <div className="App">
     <Random /></div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Composant d'application:

import React, {  useState } from "react";

import "./styles.css";

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.'
]

export default function showRandom() {
  const [selected, setSelected]=useState(0);
  return (
    <div className="App">
    <h1> {anecdotes[selected]}</h1>
     <button onClick={()=>setSelected(Math.floor(Math.random() * `anecdotes.length))}>Show Random </button>`
      </div>
  );
}