Functional Component based simple form how to get values of input

Question

I am new to ReactJS. Have been learning ReactJS since January. Came across a question on function based form, I am unable to get the values typed by the user. Please help. This is the question... A form template is given to you. Upon submitting, the information should be displayed in a list below (automatically sorted by last name) along with all the previous information that was entered.

I did an "alert({fname})", but it does not show the content of what the user entered....could you pleaes help me. I am just a beginner in ReactJS.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const style = {
  table: {
    borderCollapse: 'collapse'
  },
  tableCell: {
    border: '1px solid gray',
    margin: 0,
    padding: '5px 10px',
    width: 'max-content',
    minWidth: '150px'
  },
  form: {
    container: {
      padding: '20px',
      border: '1px solid #F0F8FF',
      borderRadius: '15px',
      width: 'max-content',
      marginBottom: '40px'
    },
    inputs: {
      marginBottom: '5px'
    },
    submitBtn: {
      marginTop: '10px',
      padding: '10px 15px',
      border:'none',
      backgroundColor: 'lightseagreen',
      fontSize: '14px',
      borderRadius: '5px'
    }
  }
}

function PhoneBookForm({ addEntryToPhoneBook }) {
    const [fname,setFname] = useState("");
    const [lname, setLname] = useState("");
    const [uphone, setUphone] = useState("");

  return (
    <form onSubmit={e => { 
        e.preventDefault();
        alert({fname});
        //alert(${fname});
        //console.log({fname});
        }}
        style={style.form.container}>
        
      <label>First name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userFirstname'
        name='userFirstname' 
        type='text'
        placeholder='Coder'
        onChange={e => setFname(e.target.value)}
        value={fname}
      />
      <br/>
      <label>Last name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userLastname'
        name='userLastname' 
        type='text' 
        placeholder='Byte'
        onChange={e => setLname(e.target.value)}
        value={lname}
      />
      <br />
      <label>Phone:</label>
      <br />
      <input
        style={style.form.inputs}
        className='userPhone' 
        name='userPhone' 
        type='text'
        placeholder='8885559999'
        onChange={e => setUphone(e.target.value)}
        value={uphone}
      />
      <br/>
      <input 
        style={style.form.submitBtn} 
        className='submitButton'
        type='submit' 
        value='Add User' 
      />
    </form>
  )
}

function InformationTable(props) {
  return (
    <table style={style.table} className='informationTable'>
      <thead> 
        <tr>
          <th style={style.tableCell}>First name</th>
          <th style={style.tableCell}>Last name</th>
          <th style={style.tableCell}>Phone</th>
        </tr>
      </thead> 
    </table>
  );
}

function App(props) {
  return (
    <section>
      <PhoneBookForm />
      <InformationTable />
    </section>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
        
export default App;

Thank you,

When asking for help, please reduce the problem to its minimal form, more here: minimal reproducible example. Also, making your example runnable using Stack Snippets (the [<>] toolbar button) makes it easier for people to help you. Stack Snippets support React, including JSX; here's how to do one. — T.J. Crowder
– T.J. Crowder, Commented Apr 21, 2021 at 21:42

Abeeb Ridwan Olumide · Accepted Answer · 2021-04-21 23:50:06Z

1

try this

remove all you put inside onSubmit in the form, take them out and put them into a function expression

like this:

const handleUserInput = (event) => {
   event.preventDefault();
   alert(fname);
   alert(lname);
   alert(uphone);
}

change form to this:

<Form onSubmit={handleUserInput} style={style.form.container}>

lastly, just being cautious, wrap all 'e' used with onChange with parenthesis like this:

onChange={(e) => setFname(e.target.value)}

Goodluck with react js

answered Apr 21, 2021 at 23:50

Abeeb Ridwan Olumide

716 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Isaac Over a year ago

Still no luck. I am using codesandbox.io playground. When I do const [fname,setFname] = useState(""); it says (0 , _react.useState) is not a function.

Isaac Over a year ago

Hi Ridwan, thanks, This is the codesandbox link : codesandbox.io/s/react-playground-forked-hc6j5

Abeeb Ridwan Olumide Over a year ago

@isaac your code is working, the problem comes down to your dependencies react and react-dom, I deleted them and installed version "17.0.2", your code worked instantly. if you are working locally, delete your node_module, then install react and react-dom v "17.0.2" --- you are good to go ; my codesandbox here: codesandbox.io/s/react-playground-forked-f6jl1?file=/… cheers!

Isaac Over a year ago

Thanks Ridwan, really appreciated, Many thanks.

Dmytro Krasnikov · Accepted Answer · 2021-04-22 04:25:10Z

0

You are doing everything right, looks like only one thing cause the problem,

alert({fname})

it should be

alert(fname)

without curly braces. How to use curly braces you can read more detailed at jsx documentation

answered Apr 22, 2021 at 4:25

Dmytro Krasnikov

1,0046 silver badges7 bronze badges

Collectives™ on Stack Overflow

Functional Component based simple form how to get values of input

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related