React not displaying text upon form submission

Question

I'm trying to take input and then display it once the form is submitted but it is not being displayed.

I first use a hook to get the text inside the input field. Once the button is pressed I run a function that uses another hook and sets its value to the text in the input field. This is then put inside the render.

The problem I'm having is that as soon as I submit the form, the screen goes blank. I have attached my code below.

import React from "react";
    import { useState } from "react";

    const App = () => {
        const [Text, setText] = useState('');
        const [Input, setInput] = useState('');
        const showInp = (e) => {
            e.preventDefault();
            setInput(Text);
        };
        return(
            <div className="Main">
                <p>
                    The following cryptocurrencies are available: Bitcoin(BTC).
                </p>
                <form onSubmit={showInp}>
                    <label htmlFor="CurrencyName">Currency Name: </label>
                    <input type="text" className="CurrencyName" value={Text} onChange={(e) => setText(e.target.value)} />
                    <button style={{marginLeft:"5px"}} type="submit">Submit</button>
                </form>
                {Input !== '' &&(
                    {Input}
                )}
            </div>
        )
    }
    export default App;

Any help would be appreciated.

Gulam Hussain · Accepted Answer · 2021-06-23 12:28:59Z

You have syntax error while rendering Input value. instead of Input value you are rending an object which has Input key and its values is Input, and react can not render objects, it will throw an error.

import React from 'react';
import { useState } from 'react';

const App = () => {
  const [Text, setText] = useState('');
  const [Input, setInput] = useState('');
  const showInp = e => {
    e.preventDefault();
    setInput(Text);
  };
  return (
    <div className="Main">
      <p>The following cryptocurrencies are available: Bitcoin(BTC).</p>
      <form onSubmit={showInp}>
        <label htmlFor="CurrencyName">Currency Name: </label>
        <input
          type="text"
          className="CurrencyName"
          value={Text}
          onChange={e => setText(e.target.value)}
        />
        <button style={{ marginLeft: '5px' }} type="submit">
          Submit
        </button>
      </form>
      {/* Below line had error */}
      {Input !== '' && Input}
    </div>
  );
};
export default App;

Collectives™ on Stack Overflow

React not displaying text upon form submission

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related