React "conditional rendering" ?

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

const Button = ({ onClick, text }) => {
  return (
    <>
      <button onClick={onClick}>
        {text}
      </button>
    </>
  )
}

const Display = ({ text }) => {
  return (
    <h1>{text}</h1>
  )
}
const History = ({ hasRating }) => {
  if (!hasRating) {
    return (
      <>
        <h1>statistics</h1>
        <p>No feedback given</p>
      </>
    )
  }
  return (<h1>statistics</h1>)
}

const Statistics = ({ text, value, hasRating }) => {
  if (hasRating) {
    return (
      <tr>
        <td>{text}</td>
        <td>{value}</td>
      </tr>
    )
  }
  return null
}

const average = (good, bad, total) => {
  return ((good - bad) / total)
}

const positive = (good, total) => {
  return ((good / total) * 100 + " %")
}

const App = () => {
  // save clicks of each button to own state
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)
  const totalRatings = good + neutral + bad
  const hasRatings = totalRatings > 0

  return (
    <div>
      <Display text="give feedback" />
      <Button onClick={() => setGood(good + 1)} text="good" />
      <Button onClick={() => setNeutral(neutral + 1)} text="neutral" />
      <Button onClick={() => setBad(bad + 1)} text="bad" />

      <History hasRating={hasRatings} />
      <table>
        <tbody>
          <Statistics text="good" value={good} hasRating={hasRatings} />
          <Statistics text="neutral" value={neutral} hasRating={hasRatings} />
          <Statistics text="bad" value={bad} hasRating={hasRatings} />
          <Statistics text="all" value={totalRatings} hasRating={hasRatings} />
          <Statistics text="average" value={average(good, bad, totalRatings)} hasRating={hasRatings} />
          <Statistics text="positive" value={positive(good, totalRatings)} hasRating={hasRatings} />
        </tbody>
      </table>
    </div>

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

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

const Random = () => Math.floor(Math.random() * anecdotes.length)

const Button = ({ text, onClick }) => {
    return (
        <button onClick={onClick}>{text}</button>
    )
}

const Display = ({text}) => {
    return(<p>{text}</p>)
}

const handleVote = (selected, vote, setVote) => {
    const tempArray = [...vote]
    tempArray[selected]++
    setVote(tempArray)
}

const handleMaxVote = (anecdotes, vote) => {
    const maxValue = Math.max(...vote)
    const maxValueIndex = vote.indexOf(maxValue)
    const maxVotedAnecdote = anecdotes[maxValueIndex]
    
    return [maxVotedAnecdote, <br />, "hello"]
    
}

const App = (props) => {
    const [selected, setSelected] = useState(Random())
    const [vote, setVote] = useState(new Array(6).fill(0))

    return (
        <div>
            <h1>Anecdote of the day</h1>
            <Display text={anecdotes[selected]} />
            <Display text={'has ' + vote[selected] + ' votes'} />
            <Button text="vote" onClick={() => handleVote(selected, vote, setVote)}/>
            <Button text="next anecdote" onClick={() => setSelected(Random())} />
            <h1>Anecdote with most votes</h1>
            <Display text={handleMaxVote(anecdotes, vote)} />
        </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')
)