conditional rendering nested ifs react

Question

i want to make something like this:

if{errors?
 {errors.email ? (
            <ErrorInput
             ...
            />
          ) : (
            <Input
        ...
            />
          )}:
(
            <Input
            ...
            />
          )}

if something (if something do ...or ...)or...

{(() => {
            if (errors) {
              if (errors.email) {
                <ErrorInput
                 ...
                />;
              } else {
                <Input
              ...
                />;
              }
            } else {
              <Input
               ...
              />;
            }
          })()} 

i tried but is Expected an assignment or function call and instead saw an expression i am using react and i am new here

Answer 1

You should check out Conditional Rendering at React docs .

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

Which eventually will look like so:

const App = () => {
  return <>{errors?.email ? <ErrorInput /> : <Input />}</>;
};

Answer 2

Try like this

return (
 <>
   {errors ?
              errors?.email ?
                (<ErrorInput
                 ...
                />)
              :
                (<Input
              ...
                />)
           :
              (<Input
               ...
              />)
            </>
)