Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Component is not getting rendered correctly in react

I am new to react and I am just trying to create a simple form.
When username and password are entered, and the submit button is clicked. I want a message to be displayed after the form containing username which is not working.
Please help!

import './App.css';
import { Button, Container, Form } from 'react-bootstrap';
import { useState } from 'react';

function App() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [message, setMessage] = useState('')

  function handleSubmit(event) {
    event.preventDefault();
    setMessage(<h1>{username}</h1>)
    // console.log('message is ', message)
  }
  return (
    <Container>
      <Form onSubmit={handleSubmit}>
        <Form.Group>
          <Form.Label>
            Username
          </Form.Label>
          <Form.Control value={username} onChange={(event) => {
            setUsername(event.target.value)
            console.log(username)
          }} />
        </Form.Group>
        <Form.Group>
          <Form.Label>
            Password
          </Form.Label>
          <Form.Control value={password} onChange={(event) => {
            setPassword(event.target.value)
            console.log(password)
          }} />
        </Form.Group>
        <Button className='mt-3'>Submit</Button>
      </Form>
      {message}
    </Container>
  )
}

export default App;
`
Tags:

4

Answers


  1. 0

    Two things you need to check:

    1. The Button in your form should have a type="submit" to trigger the form submission when clicked.
    2. If the message is set before displaying it to avoid showing an empty message initially.
      return (
    <Container>
      <Form onSubmit={handleSubmit}>
        <Form.Group>
          <Form.Label>Username</Form.Label>
          <Form.Control 
            value={username} 
            onChange={(event) => setUsername(event.target.value)} 
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>Password</Form.Label>
          <Form.Control 
            type="password" // Ensure password input is hidden
            value={password} 
            onChange={(event) => setPassword(event.target.value)} 
          />
        </Form.Group>
        <Button type="submit" className='mt-3'>Submit</Button> {/* Ensure button triggers form submission */}
      </Form>
      {message && <h1>{message}</h1>} {/* Conditionally display the message */}
    </Container>
  );
}
    Login or Signup to reply.
  2. 0

    this part is wrong:

      function handleSubmit(event) {
      event.preventDefault();
      setMessage(<h1>{username}</h1>)
      // console.log('message is ', message)
    }

    instead put:

        function handleSubmit(event) {
      event.preventDefault();
      setMessage(`Welcome, ${username}!`); // Sets the message with the username
    }

    and the Button should be type submit:

     <Button type="submit">Submit</Button>
    Login or Signup to reply.
  3. 0

    Issue:

    It looks like the form is not being submitted because the button type is not set to submit. As a result, the form does not trigger the submit event, and you cannot see the message on the screen.

    Solution:

    Ensure that the button inside your form has the type attribute set to submit. This will trigger the form submission when the button is clicked. Here’s how you can fix it:

    <Button className='mt-3' type='submit'>Submit</Button>

    Explanation:

    In HTML, the type attribute of a button determines its behavior. By default, a button has the type attribute set to button, which means it does not submit the form. Changing the type to submit makes the button act as a submit button, which will trigger the form submission and allow you to see the results or message on the screen.

    If you are using a library like React Bootstrap or Material-UI, make sure that the component you are using is properly configured to handle the type attribute.

    Login or Signup to reply.
  4. 0 
    import { Button, Container, Form } from "react-bootstrap";
import { useState } from "react";
import './App.css';

function App() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState("");

  function handleSubmit(event) {
    event.preventDefault();

    console.log("Username:", username);
    console.log("Password:", password);

    setMessage(`Submitted Username: ${username} and Password: ${password}`);
  }

  return (
    <Container>
      <Form onSubmit={handleSubmit}>
        <Form.Group>
          <Form.Label>Username</Form.Label>
          <Form.Control
            value={username}
            onChange={(event) => {
              setUsername(event.target.value);
            }}
          />
        </Form.Group>
        <Form.Group>
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            value={password}
            onChange={(event) => {
              setPassword(event.target.value);
            }}
          />
        </Form.Group>
        <Button type="submit" className="mt-3">
          Submit
        </Button>
      </Form>
      {message && <p>{message}</p>}
    </Container>
  );
}

export default App;

    You can do something like this. I’d suggest read the documentation thoroughly before working: https://react.dev/learn

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search