React: Function to create Inputs [duplicate]

Question

I'm starting to use and test React, one of the things that I liked was the possibility to create functions with "dinamic HTML". Actually I'm trying to create a simple notes app, React + PHP, ( https://blog.bitsrc.io/how-to-build-a-contact-form-with-react-js-and-php-d5977c17fec0 ), how can I save the values in the state if i cant use

value={this.state.lname} onChange={e => this.setState({ lname: e.target.value })}

on my function to print/create Inputs?

function InputH(Name){

    var Input = (
        <tr>
            <th>
                <label htmlFor={Name}>{Name}</label>
            </th>
            <td>
                <input type="text" id={Name} name={Name} placeholder={"Your "+Name.toString().toLowerCase()}
                       value={undefined}
                       onChange={e => this.setState({ lname: e.target.value })}
                />
            </td>
        </tr>
    );

    return Input;
}

Sorry for my noobs question, greetings and thanks.

Are you using functional components then I am assuming? With functional components, state is done with the useState hook. — Jeremy Harris
– Jeremy Harris, Commented Feb 28, 2020 at 18:03
Does this answer your question? React functional component using state — HydraHatRack
– HydraHatRack, Commented Feb 28, 2020 at 18:58

Hamed Navvabian · Accepted Answer · 2020-02-28 18:13:35Z

You should use 'useState' hook on function component:

import React, { useState } from 'react';

function InputH(props){ // also here we have all the props on first parameter on function component
    const { name } = props;
    const [inputValue, setInputValue] = useState('');

    const handleChange = e => setInputValue(e.target.value);

    return (
        <tr>
            <th>
                <label htmlFor={name}>{name}</label>
            </th>
            <td>
                <input type="text" id={name} name={name} placeholder={"Your " + name.toString().toLowerCase()}
                       value={inputValue}
                       onChange={handleChange}
                />
            </td>
        </tr>
    );
}

and on class component you should use state:

import React, { Component } from 'react';

export default class InputH extends Component { // also here we have all the props on first parameter on function component
  state = {
    inputValue: ''
  };

  handleChange = e => {
    this.setState({
      inputValue: e.target.value
    });
  };

  render() {
    const { name } = this.props;
    const { inputValue } = this.state;

    return (
      <tr>
        <th>
          <label htmlFor={name}>{name}</label>
        </th>
        <td>
          <input type="text" id={name} name={name} placeholder={"Your " + name.toString().toLowerCase()}
                 value={inputValue}
                 onChange={this.handleChange}
          />
        </td>
      </tr>
    );
  }
}

Collectives™ on Stack Overflow

React: Function to create Inputs [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related