Hello, Why can't I use two return statements in react.js components-CodePudding

I have two functions MissedGoal and MadeGoal using the condition I want to the functions to be displayed alternatively according to the Boolean value (True, false). When I change the prop value in index.js from true is displays MadeGoal when I change prop value to false is displays MissedGoal Here is my Code Cond.js

import React from 'react'

function MissedGoal() {
 return <h1>Missed!</h1>
}
function MadeGoal() {
 return <h1>Goal!</h1>
}

function Cond(props) {
 const isGoal = props.isGoal;
 if (isGoal) {
  return <MadeGoal />;
 }
  return <MadeGoal />;
  return (
    <div>
     {isGoal}</div>
  )
}

export default Cond

It rendered below by index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Jsx from './Jsx'
import Tools from './Tools';
import Trick from './Trick';
import Foot from './Foot';
import Cond from './Cond';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <Jsx />
    <Tools name="Ishmo" tool="Adobe"/>
    <Trick />
    <Foot />
    <Cond isGoal= {true}/>
  </React.StrictMode>
);

CodePudding user response：

You need to return this

  return (
   <>
   <MadeGoal />
    <div>
     {isGoal}
    </div>
   </>
  )

The <> (can change to <React.Fragment> for key) is called react fragment Read here

CodePudding user response：

The Third return in function Cond is redundant . Control will never reach there. Control goes out of the block after encountering a return statement

CodePudding user response：

Note: React components are just functions, so when we return multiple elements at the same level, we are effectively using multiple return statements at the same level of a function.

When JavaScript reaches a return statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.

Functions often compute a return value. The return value is "returned" back to the "caller":

If you return the third statement you can use condition (if, else if, else).`

import React from 'react'


function MissedGoal() {
  return <h1>Missed!</h1>
}

function MadeGoal() {
  return <h1>Goal!</h1>
}


function Cond(props) {

  const isGoal = props.isGoal;

  if (isGoal) {
    return <MadeGoal />
  } else if (isGoal == false) {
    return <MissedGoal />
  } else {
    return <div>Please add your message here</div>
  }
}

export default Cond;

CodePudding user response：

 const isGoal = props.isGoal;
 if (isGoal) {
  return <MadeGoal />;
 }
  return <MadeGoal />; // change it to MissedGoal component
  return (
    <div>
     {isGoal}</div>
  )
}

here both times you are returning

and after returning a component you cant return it again if you returned me my pen then without again taking it how can you again give me

so you cant return a component 2 times because the code is not reachable