CODEWITHSUNDEEP
javascripthtmlreactjsforms
ak-51
ak-51

Reputation: 15

React not displaying text upon form submission

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.

Upvotes: 1

Views: 738

Answers (1)

Gulam Hussain
Gulam Hussain

Reputation: 1763

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;

Upvotes: 1

Related Questions