Q:

JSX Component Lint warnings

New to React and trying to get my head around it. Working on some basic form field validation using guide here: 
https://redux-form.com/8.2.2/examples/fieldlevelvalidation/
I have this working, but i need to change the format of the renderField component.
This works fine:
renderField = (
        {
            input, label, type, meta: { touched, error, warning },
        },
    ) => (
        <div>
            <input {...input} placeholder={label} type={type} />
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
        </div>
        );

but i need to remove the enclosing < d i v > from this, to make the following:
renderField = (
        {
            input, label, type, meta: { touched, error, warning },
        },
    ) => ( 
            <input {...input} placeholder={label} type={type} />
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}    
        );

When doing this, the linter is going crazy regarding the second line here. It is expecting a ) after the input tag and has complaints about pretty much every character on the second line!
I'm sure this is a pretty simple concept that i am not grasping, so any assistance would be much appreciated.

A:

In that situation you can replace by:
Using this <></> 
renderField = (
        {
            input, label, type, meta: { touched, error, warning },
        },
    ) => ( 
           <>
            <input {...input} placeholder={label} type={type} />
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}    
           </>
        );

or 
import react, {Fragment} from 'react';

    renderField = (
            {
                input, label, type, meta: { touched, error, warning },
            },
        ) => ( 
               <Fragment>
                <input {...input} placeholder={label} type={type} />
                {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}    
               </Fragment>
            );

This will avoid rendering a parent div or any not desired HTML element for enclosing your JSX.

