React, is there a way to avoid needing to wrap a div inside a div?

Question

I have the following:

const errorMessage = ({meta}) =>
  <div>
    {meta.error && meta.touched && <div className="alert alert-info" role="alert">{meta.error}</div>}
  </div>

If I remove the outer div wrapper in the above I get an error... Is there a way to get errorMessage to work without the extra DIV?

Thanks

Answer 1

You can write it like this by using {} :

const ErrorMessage = ({meta}) => {

    if(meta.error && meta.touched)
        return <div className="alert alert-info" role="alert">{meta.error}</div>

    return null;
}

Or remove the outer div and remove the {} also, use ternary operator to put the condition, like this:

const ErrorMessage = ({meta}) => meta.error && meta.touched ? 
    <div className="alert alert-info" role="alert">{meta.error}</div>
    : null;

You need to use ErrorMessage instead of errorMessage , check the reason here:

Html is not rendering in the browser - React js

Check this answer why it was failing when you removed the outer div :

const errorMessage = ({meta}) => 
    {meta.error && meta.touched && <div className="alert alert-info" role="alert">{meta.error}</div>}

Answer 2

You can write like this :

const errorMessage = ({meta}) => {
return (meta.error && meta.touched) ? `<div className='alert alert-info' role='alert'>${meta.error}</div>` : null
}