title: React - Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation
body: <p>I want to use react-validation component <code>Input</code> in my form. This is why I imported it &amp; used inside the form as:</p>
  <pre><code>&lt;Input className=&quot;form-control&quot;
         type=&quot;text&quot;
         placeholder=&quot;name&quot;
         value={props.data.creatingUser.createName}
         name=&quot;createName&quot;
         id=&quot;createName&quot;
         onChange={props.handleAddChange}
  required/&gt;
  </code></pre>
  <p>When I try to run the application using <code>npm start</code>, I receive the following error in the console:</p>
  <blockquote>
  <p>SyntaxError:
  E:\Projects\personal\rental-application\node_modules\react-validation\src\components\input\index.js:
  Support for the experimental syntax 'jsx' isn't cur rently enabled
  (6:3):</p>
  <p>const Input = ({ error, isChanged, isUsed, ...props }) =&gt;
  (</p>
  <blockquote>
     
  </blockquote>
  <pre><code>|   ^        &lt;input {...props} {...( isChanged &amp;&amp; isUsed &amp;&amp; error ? {        className: `is-invalid-input ${props.className}`
   } : { className: props.className } )} /&gt; 
  </code></pre>
  </blockquote>
  <p><strong>I have not explicitly done any babel configuration</strong> and my <code>package.json</code> file has the following content:</p>
  <pre><code>{
    &quot;name&quot;: &quot;rental-application&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.9&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.2.3&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.6.0&quot;,
      &quot;jquery&quot;: &quot;^3.5.1&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-scripts&quot;: &quot;4.0.1&quot;,
      &quot;web-vitals&quot;: &quot;^0.2.4&quot;,
      &quot;popper.js&quot;: &quot;1.16.1&quot;,
      &quot;css-loader&quot;: &quot;^5.0.1&quot;,
      &quot;react-bootstrap&quot;: &quot;^1.4.3&quot;,
      &quot;sass-loader&quot;: &quot;^10.1.1&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;axios&quot;: &quot;^0.21.1&quot;,
      &quot;react-notifications&quot;: &quot;^1.7.2&quot;,
      &quot;react-fontawesome&quot;: &quot;^1.7.1&quot;,
      &quot;react-table&quot;: &quot;^6.11.4&quot;,
      &quot;react-validation&quot;: &quot;^3.0.7&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/plugin-transform-async-to-generator&quot;: &quot;^7.12.1&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;react-table-6&quot;: &quot;^6.11.0&quot;
    }
  }
  </code></pre>
  <p>My project structure:</p>
  <pre><code>++node_modules
  
  ++public
  +++index.html
  +++manifest.json
  +++robots.txt
  
  ++src
  +++App.js
  +++index.js
  +++index.css
  
  ++package.json
  ++package-lock.json
  </code></pre>
  <p>You can see I am not using any other configuration, and I have initiated the project using create-react-app command.</p>