Как изменить компонент класса (входной, условный) на функциональный компонент с помощью useState - hook?

Question

Я хотел бы изменить компонент рабочего класса на функциональный компонент.В основном это поле ввода, которое должно:

1) Динамически отображать / отражать все, что вы вводите (см. H1 ниже формы) 2) Показывать «данные не предоставлены», если ничего не введено

Ошибкав сообщении написано «Не удалось скомпилировать ... неожиданное использование« события »»

import React, { useState } from "react"

function Exercise2() {
    const [input, inputChange] = useState({firstName: ""})

    const handleChange = () => {
        inputChange({[event.target.name]: event.target.value});
    }

    let display
    if (useState.firstName != "") {
        display = useState.firstName
    } else {
        display = "no data provided!"
    }

    return (
        <div>
            <form>
                <input
                    type="text"
                    name="firstName"
                    placeholder="Enter your data here"
                    value = "input.firstName"
                    onChange = "handleChange"
                />
            </form>

            <h1>{display}</h1>
        </div>
    )
}

export default Exercise2

Может кто-нибудь указать, что мне не хватает (без слишком большого изменения структуры кода, так как я хочу придерживаться своей логики для начинающих)).Thx

PS: это был мой компонент класса, который работал отлично, и что я пытаюсь перевести

class Exercise1 extends React.Component {

    constructor() {
        super()
        this.state = {
            firstName:""
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange (event) {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    render() {
        let display
        if(this.state.firstName != "") {
            display=this.state.firstName
        } else {
            display="no data provided!"
        }
        return (
            <div>
                <form>Input: 
                    <input 
                        type="text" 
                        name="firstName" 
                        placeholder = "Enter your data here!"
                        value={this.state.firstName}
                        onChange={this.handleChange}
                    />
                </form>

                <h1>{display}</h1>              
            </div>
        )
    }
}

Answer 1

Итак, ключевые вещи таковы:

1) Не помещать имена переменных / методов в фигурные скобки

value={input.firstName}
onChange={handleChange}

2) Не включать event arg в ваш handleChange method:

const handleChange = (event) => {

Здесь я исправил эти проблемы, а также изменил способ отображения, чтобы сделать его более похожим на React.

const { useState } = React;

function Exercise2() {

  // Here you're setting state and assigning an object to it with
  // once property: `firstName`
  const [ input, inputChange ] = useState({ firstName: '' });

  const handleChange = (event) => {

    // The click event has been passed in.
    // `target` is the element that's been clicked. We're just grabbing the name and
    // value from it. We're assigning the name `firstName` as a dynamic property key name
    // (we wrap it in square braces), and assign the value to it. We do that because we want to
    // update the `firstName` property in the state object.
    // Because state is an object (and we might eventually have other properties in there
    // that we want to keep when we update this value) we return an object containing all
    // the properties of input, and the new dynamic property
    inputChange({ ...input, [event.target.name]: event.target.value });
  }

  // `input` is an object with a firstName property.
  // We can destructure the `firstName` property from the state to make
  // it easier to work with
  const { firstName } = input;
console.log(input)
  let display;

  if (firstName.length) {
    display = firstName;
  } else {
    display = "no data provided!";
  }

  return (
    <div>
      <form>
        <input
          type="text"
          name="firstName"
          placeholder="Enter your data here"
          value={firstName}
          onChange={handleChange}
        />
      </form>

      <h1>{display}</h1>
    </div>
  );
}

ReactDOM.render(<Exercise2 />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 2

Ваш синтаксис кажется неправильным, вы должны попробовать что-то вроде

import React, { useState } from "react"

function Exercise2() {
    const [formData, changeFormData] = useState({firstName: ""});

    const handleChange = (event) => {
        changeFormData({[event.target.name]: event.target.value});
    }



    return (
        <div>
            <form>
                <input
                    type="text"
                    name="firstName"
                    placeholder="Enter your data here"
                    value={formData.firstName}
                    onChange={handleChange}
                />
            </form>
            <h1>{formData.firstName !== "" ? formData.firstName : 'no data provided!'}</h1>
//the above line is a ternary operator, basically it reads as if( input.firstName !== "") return input.firstName : else return 'no data provided!'
        </div>
    )
}

export default Exercise2

Answer 3

import React, { useState } from "react"

function Exercise2() {
const [input, inputChange] = useState({firstName: ""})

const handleChange = (event) => {
    inputChange({[event.target.name]: event.target.value});
}

let display
if (input.firstName !== "") {
    display = input.firstName
} else {
    display = "no data provided!"
}

return (
    <div>
        <form>
            <input
                type="text"
                name="firstName"
                placeholder="Enter your data here"
                value = {display}
                onChange = {handleChange}
            />
        </form>

        <h1>{display}</h1>
    </div>
)
}

export default Exercise2