'UserInput' 已定义但从未使用过 no-unused-vars 'UserOutput' 已定义但从未使用过 no-unused-vars

Question

newbie to react, following a series of lecture i just trying to excute this simple code but something went wrong and gave me error like 'UserInput' is defined but never used* although path and src sets perfectly ok *

App.js

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

class App extends Component() {

  render() {
  return (
    <div className="App">
      <p>some random text</p>
      <userInput />
      <userOutput /> 
    </div>

  );
}
}
export default App;

UserInput.js

import React from 'react';
const userInput = () => {

return <input type="text" />;
};
export default userInput;

UserOutput.js

import React from 'react';

const userOutput = () => {

return(<div>
    <button>hello </button> 
    </div>)


};
export default userOutput;

Answer 1

Improvement

Define class App extends Component{} not class App extends Component(){}

Define imported UserInput , UserInput like

      <UserInput />
      <UserOutput /> 

App.js

import  UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';

class App extends Component{

  render() {
  return (
    <div className="App">
      <p>some random text</p>
      <UserInput />
      <UserOutput /> 
    </div>
  );
}}
export default App;

Live demo for your code demo