score:4

Accepted answer
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')
);

score:1

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

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

score:1

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>
  )
}

score:1

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);

Related Query

More Query from same tag