Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

167
Visualizações
React state update and display new value

I am trying to update a state value and display that updated value in an input field, but nothing seems to work for me.

I have been going through various articles and answers but none of the ways seem to work for me, possibly I am doing something wrong.

const AnswerDetailOptions = ({ options, className, answer_id, last_review_details }) => {
  const [reviewNoteDisplay, setReviewNoteDisplay] = useState(last_review_details.note)
  const [reviewNoteTimeStamp, setReviewNoteTimeStamp] = useState(last_review_details.date_time)

  useEffect(() => {
    // test
  }, [reviewNoteDisplay])

  const submitReview = async () => {
    const payload = {
      note: reviewNote,
      answer_id
    }

    const response = await submitNewReview(payload)
    //console.log(response)

    if (response.status === 201) {
      toast.success('Review saved successfully')

      setReviewNoteDisplay(() => return response.data.data.note)
      setReviewNoteTimeStamp(() => return response.data.data.date_time)

      closeCreateReviewDialog()
    } else {
      toast.error('Failed to save review')
    }
  }

Render:

{
        reviewNoteTimeStamp ? 
          <>
            <EditableText 
              multiline="true"
              placeholder="Write a review..."
              defaultValue={reviewNoteDisplay}
              confirmOnEnterKey="true"
              onChange={(new_value) => setReviewNoteDisplay(new_value)}
              onConfirm={editReview}
            />
            <p className={classNames(styles.node, styles.reviewTimeStamp)}>{ format(new Date(reviewNoteTimeStamp), 'dd/MM/yyyy, hh:mm a') }</p>
            <Button onClick={() => setShowReviewHistory(true)}>Review History</Button>
          </> :
          <>
            <p>No reviews added</p>
          </>
      }

I am trying to get the new value of reviewNoteDisplay and reviewNoteTimeStamp but I keep geting the old value.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

your input needs to control the input, use value and not defaultValue here:

<EditableText 
 multiline="true"
 placeholder="Write a review..."
 value={reviewNoteDisplay}
 confirmOnEnterKey="true"
 onChange={(new_value) => setReviewNoteDisplay(new_value)}
 onConfirm={editReview}
/>

i don't know the EditableText component, but if onChange isn't fired on each key hit, you may also need to add:

onKeyUp={(e) => setReviewNoteDisplay(e.target.value)}

or something like this.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda