State

Question 1

Como utilizar state?

Answer 1

import React, {useState} from “react”

ou

React.useState()

//Exemplo...
//https://scrimba.com/learn/learnreact/usestate-changing-state-with-a-callback-function-cof9245f4a914e8aaf080c783

import React from “react”

export default function App() {
const [count, setCount] = React.useState(0)

    function add() {
        setCount(function(oldValue) {
            return oldValue + 1
        })
    }

    function subtract() {
        // Don't do this
        // setCount(count - 1)
        // Do that instead or the above option
        prevCount => prevCount - 1
    }

    return (
        <div>
            –
            <div>
                <h1>{count}</h1>
            </div>
            \+
        </div>
    )
}

Question 2

Challenge State and ternary conditional

https://scrimba.com/learn/learnreact/challenge-flipping-state-back-and-forth-co4674229b54cd8335c75e54d

Answer 2

a

Question 3

Add Element in Array (spread array)

https://scrimba.com/learn/learnreact/complex-state-arrays-co8f0498bb502fff29cbc8ee5

Answer 3

a

Question 4

Updating state objects

https://scrimba.com/learn/learnreact/complex-state-updating-state-objects-cJLgWJSN

Answer 4

spread object
…prevObject,
//overide the attribute

Question 5

Como adiciona estilo inline como fazemos no HTML?

Answer 5

É necessário adicionar o parâmetro style, da mesma forma que no HTML, porém este vai receber um objeto javascript:

const styles = {
        backgroundColor: props.darkMode ? "#222222" : "#cccccc"
    }

const squareElements = squares.map(square => (
    <div style=""></div>
))

Question 6

Adicione estilo de forma condicional:

https://scrimba.com/learn/learnreact/boxes-challenge-part-2-cobb94ca9aed421681cf67b3c

Answer 6

https://scrimba.com/learn/learnreact/boxes-challenge-part-2-cobb94ca9aed421681cf67b3c

Question 7

How send ID to handle event function in component?

Answer 7

import React from “react”

export default function Box(props) {
    const styles = {
        backgroundColor: props.on ? "#222222" : "transparent"
    }

    return (
        <div style="">props.toggle(props.id)}
        >
        </div>
    )
}

Question 8

Forms and set values state to objects

Answer 8

//...
 const [formData, setFormData] = React.useState(
        {firstName: "", lastName: "", email: ""}
    )

    function handleChange(event) {
        setFormData(prevFormData => {
            return {
                ...prevFormData,
                [event.target.name]: event.target.value
            }
        })
    }

return (

//…