Parsing error: Identifier 'React' has already been declared

Question

I m trying to import component but i m not able to do it

I have also tried export default class App extends React.Component instead of class App extends Component() but it is not solving my problem

import React from 'react';
import React,{Component} from 'react';
import './App.css';


class App extends Component() {
  constructor(props){

  }
  render() {
  return (
    <div className="App">
      <table className="titleBar">
        <tbody>
          <tr>
            <td>
              <img alt="app icon" width="50" src="primary_green.svg"/>
            </td>
            <td width="8"/>
            <td>
              <h1>MovieDb Search</h1>
            </td>
          </tr>
        </tbody>
      </table>
      <input style={{
        fontSize: 24,
        display: 'block',
        width: '99%',
        paddingTop: 8,
        paddingBottom: 8,
        paddingLeft: 16
      }} placeholder="Enter Search Term"/>
    </div>
  );
 }
}

export default App;


Line 2:  Parsing error: Identifier 'React' has already been declared

import React from 'react';
import React,{Component} from 'react';
import './App.css';

Answer 1

On the top of code snippet React is imported twice

import React from 'react';
import React,{Component} from 'react';

It should be

import React, {Component} from 'react';

Answer 2

React has already been imported in the first line itself, no need to import it twice. What you should do is remove the first line and your code will run.

Answer 3

Remove the first React import line. In the second line you are also importing React. You need to import React once. So, only the second line will do.

Answer 4

Remove the below import from the child component.

import React, { Component } from 'react'

If the Parent component is already have the same import and you are calling a child component from that parent component then child doesn't need that same import statement.