Props.email value not printed on screen in react.js

Question

See app.js and ternaryi.js I pass the email value in ternaryi and want to print on screen but only the count will be printed can anyone hep me to solve this problem.

App.js

import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import Ternaryi from "./Ternaryi";

function App() {
  const [count, setCount] = useState(null);
  return (
    <div className="App">
      <form onSubmit={getFormData}>
        <select onChange={(e) => setCount(e.target.value)}>
          <option>select option</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <button type="submit">submit</button>
      </form>
      <Ternaryi name={count}/>
    </div>
  );
  function getFormData(e) {
    console.log(count);
    <Ternaryi email={"hyy"}/>
    e.preventDefault();
  }
}

export default App;

Ternary.js

import {useState} from 'react';
function Ternaryi(props) {
    return (
      <div>
        <h1>email = {props.email}</h1>
        {props.name==1? <h1>Welcome user 1</h1>:props.name==2? <h1>Welcome user 2</h1>:<h1>Welcome user 3</h1>}
      </div>
    )
  }
  
  export default Ternaryi;

react image

score 0 · Answer 1 · answered Jun 18 '22 at 12:46

You should set the email attribute in the JSX element:

function App() {
  const [count, setCount] = useState(null);
  
  function getFormData(e) {
    e.preventDefault();
    console.log(count);
  }

  return (
    <div className='App'>
      <form onSubmit={getFormData}>
        <select onChange={(e) => setCount(e.target.value)}>
          <option>select option</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <button type='submit'>submit</button>
      </form>
      <Ternaryi email='hyy' name={count} />
    </div>
  );
}

export default App;

Props.email value not printed on screen in react.js

1 Answers1