Entrar Ainda não tem acesso?
1
resposta

useState para renderinzar a lista de notas mas nao esta funcionando

Referente ao curso React: entendendo como a biblioteca funciona

por Dantas
| 221.6k xp | 20 posts
Arquiteto de Sistemas

Estou na parte de usar o useState para atualizar minha array de notas no li element mas não esta funcionando, não sei como fazer o render com o useState, já tentei diversas coisas diferentes mas nenhuma funcionou, com certeza deve ser alguma coisa que não estou conseguindo ver, esses são os códigos do meu app (obs.: não estou componentes com classe estou usando só as funções por isso meu código esta diferente do instrutor):

import { useState } from 'react'
import { Header } from './components/Header'
import { NoteList } from './components/NoteList'
import { NewNote } from './pages/NewNote'

export function App() {
  const [notes, setNotes] = useState([])

  function createNewNote(title, noteText) {
    const newNote = { title, noteText }
    notes.push(newNote)


    console.log(notes.length, notes)
    setNotes(notes)
  }

  return (
    <>
      <Header />
      <NewNote createNewNote={createNewNote} />
      <NoteList notes={notes} />
    </>
  )
}

export default App
import { useState } from 'react'
import '../styles/new-note.scss'

export function NewNote(props) {
  const [title, setTitle] = useState('')
  const [noteText, setNoteText] =useState('')



  const handleTitleChange = event => {
    setTitle(event.target.value)

    // console.log(title)
  }

  const handleNoteTextChange = event => {
    setNoteText(event.target.value)
    // console.log(noteText)
  }

  const createNewNote = event => {
    event.preventDefault()

    props.createNewNote(title, noteText)
  }

  return (
    <div className="content">
      <form onSubmit={createNewNote}>
        <input type="text" placeholder="Title" onChange={handleTitleChange} />
        <textarea placeholder="Take a note..." onChange={handleNoteTextChange} />
        <button type='submit'>Create Note</button>
      </form>
    </div>
  )
}
import { NoteCard } from '../components/NoteCard'
import '../styles/note-list.scss'

export function NoteList(props) {
  return (
    <div className="notes-history">
      <ul>
        {props.notes.map((note, index) => {
          return (
            <li key={index}>
              <span>{note}</span>
              <NoteCard />
            </li>
          )
        })}
      </ul>
    </div>
  )
}
export function NoteCard() {
  return (
    <section>
      <header>
        <h3>fs</h3>
      </header>
      <p></p>
    </section>

  )
}
1 resposta
por Pablo Henrique Lucas da Fonseca
| 42.3k xp | 29 posts
Técnico em Enfermagem

Salve Dantas. Tudo certo ?

Nesse caso vamos usar o Context API do react, ele já vem nativo e é bem facil de usar:

Primeiro cria um arquivo chamado Contextos.js.

Nele você vai colocar o codigo: 

import React from 'react';

const MyContext = React.createContext(); // Assim que se cria um contexto, por enquanto nao passaremos nenhum valor pra ele.

export default MyContext; // exportamos o contexto, ou seja, para utilizarmos ele iremos importar.

Agora no teu app.js: 

import { useState } from 'react'
import { Header } from './components/Header'
import { NoteList } from './components/NoteList'
import { NewNote } from './pages/NewNote'
import MyContext from './context'

//importamos o contexto criado no arquivo context.js

export function App() {
  const [notes, setNotes] = useState([])

  function createNewNote(title, noteText) {
    const newNote = { title, noteText }
    notes.push(newNote)
    console.log(notes.length, notes)
    setNotes(notes)
  }

  return (
  <Header />
   <NewNote createNewNote={createNewNote} />
   <MyContext.Provider value={{notes}}> 

   // definimos onde sera o usado o contexto

   <NoteList/> 

   // NoteList eh filho de MyContext, ou seja, ele recebe o estado Notas que o MyContext ta passando

    </MyContext.Provider>
  )
}

export default App

Assim agora NoteList recebe o valor do estado Notas, mas ainda nao consume ele, entao no NoteList.js: 

import React, { useContext } from 'react'

// importamos useContext, ele que vai consumir os dados do contexto criado.

import MyContext from '../contexts/myContext' 

// importamos o contexto para usar como parametro do useContext

import { NoteCard } from '../components/NoteCard'
import '../styles/note-list.scss'

export function NoteList() { // nao recebe mais props

const { notes } = useContext(MyContext) 

// agora temos uma variavel que recebe o estado notas.
// O nome da variavel tem que ser igual ao nome do estado que voce passou pro Context.Provider )

  return (
    <div className="notes-history">
      <ul>
        {notes.map((note, index) => { // notes agora nao eh mais props.notes
          return (
            <li key={index}>
              <span>{note}</span>
              <NoteCard />
            </li>
          )
        })}
      </ul>
    </div>
  )
}

Feito! Agora o NoteList recebe notes sempre que atualizar. se nao pegou ainda bem como funciona o Context API, nao se preocupe continua com as aulas que em algum momento voce vai ter uma aula sobre Context API.