Name: Conditional rendering: ternary
Uploaded: 2021-09-21T17:59:37.921Z
Duration: 2 min 49 s
Description: Conditional rendering: ternary

scrimba

Watch in fullscreen

Conditional rendering: ternary

by Bob Ziroll

The Frontend Developer Career Path

About

Comments

Notes

Conditional rendering practice4:45

Conditional rendering: ternary

by Bob Ziroll

The Frontend Developer Career Path

Expand for more info

Conditional rendering practice4:45

Joke.js

run

preview

console

import React from "react"

export default function Joke(props) {
    const [isShown, setIsShown] = React.useState(false)
    function toggleShown(){
        setIsShown(prevShown => !prevShown)
    }
    return (
        <div>
            {props.setup && <h3>{props.setup}</h3>}
            {isShown && <p>{props.punchline}</p>}
            <button onClick={toggleShown}>Show Punchline</button>
            <hr />
        </div>
    )
}

import React from "react"

export default function Joke(props) {

const [isShown, setIsShown] = React.useState(false)

function toggleShown(){

setIsShown(prevShown => !prevShown)

}

return (

<div>

{props.setup && <h3>{props.setup}</h3>}

{isShown && <p>{props.punchline}</p>}

<button onClick={toggleShown}>Show Punchline</button>

<hr />

</div>

)

}

-2:49