Input does not accept text - React

Question

I’m new to React, but I don’t think it’s anything like React. I am sending a form to send and register in my database in the input fields as shown in the codes below, however, on the screen it does not allow me to insert text in the "Case Title" input. Even by changing the values of my variables, it still returns an undefined input error.

Follow my React code:

import React, {useState} from 'react';

import { Link, useHistory } from 'react-router-dom';

import{ FiArrowLeft } from 'react-icons/fi';

import api from '../../services/api';

import './styles.css';

import logoImg from '../../assets/logo.svg';


export default function NewIncident() {
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [value, setValue] = useState('');

    const history = useHistory();

    const ongId = localStorage.getItem('ongId');


    async function handleNewIncident(e){
        e.preventDefault();

        const data=  {
            title,
            description,
            value
        };

        try {
            await api.post('incidents', data, {
                headers: {
                    Auth: ongId
                }
            });

            history.push('/profile');
        } catch(err) {
            alert('Não foi possível criar um novo caso, tente novamente');
        }
    }

    return (
        <div className="new-incident-container">
            <div className="content">
                <section>
                    <img src={logoImg} alt="Be The Hero"/>

                    <h1>Cadastrar novo caso</h1>
                    <p>Descreva o caso detalhadamente para encontrar um herói para resolver isso.</p>

                    <Link className="back-link" to="/profile">
                        <FiArrowLeft size={16} color="#E02041" />
                        Voltar para home
                    </Link>
                </section>

                <form onSubmit = {handleNewIncident} >

                    <input placeholder="Título do caso" value = {title} onChange = {e => setTitle(e.target.title)} />
                    <textarea placeholder="Descrição" value = {description} onChange = {e => setDescription(e.target.description)} />
                    <input placeholder="Valor em reis (R$)" value = {value} onChange = {e => setValue(e.target.value)} />

                    <button className="button" type="submit">Cadastrar</button>
                </form>
            </div>
        </div>
    );
}

Answer 1

Hello,

The mistake I identified was that when you give the setValue(), you are using e.target.title instead of e.target.value and the same goes for e.target.description, since title and description does not exist in the component HTMLInputElement of HTML.

For you to solve, just change title and description for value, being like this:

<input
    placeholder="Título do caso"
    value={title}
    onChange={(e) => setTitle(e.target.value)}
/>
<textarea
    placeholder="Descrição"
    value={description}
    onChange={(e) => setDescription(e.target.value)}
/>
<input
    placeholder="Valor em reis (R$)"
    value={value}
    onChange={(e) => setValue(e.target.value)}
/>

In the case you put e.target.value, is the right way, since you want the valor of input :D