is there any condition ? to import react component into a particular file

Question

i have a component and two js file index.js and App.js i am getting output while importing component into index.js but when I am importing it into App.js nothing on screen.

below is my code in App.js file.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ClassBased_count from "./Components/ClassBased_Count";
class Myclass extends Component {
render() {
return (
  <div>
    <ClassBased_count />
  </div>
);
}
}
ReactDOM.render(<Myclass />, document.getElementById("root"));

this is component file ClassBased_Count.js

import React, { Component } from "react";

class ClassBased_count extends Component {
state = {
count: 0,
};
Increment = () => {
this.setState({ count: this.state.count + 1 });
};
Decrement = () => {
this.setState({ count: this.state.count - 1 });
};
Reset = () => {
this.setState({ count: 0 });
};
render() {
return (
  <div>
    <h1>{this.state.count}</h1>
    <button id="btn1" onClick={this.Increment}>
      Increase
    </button>
    <button id="btn2" onClick={this.Decrement}>
      Decrease
    </button>
    <button id="btn3" onClick={this.Reset}>
      Reset
    </button>
  </div>
 );
 }
 }
 export default ClassBased_count;

Answer 1

For your code to work in this way, index.js and App.js files should be as follows:

index.js code like this:

import { StrictMode } from "react";
import App from "./App";

export default App;

App.js code like this:

import React, { Component } from "react";
import ClassBased_count from "./Components/ClassBased_count";

class Myclass extends Component {
  render() {
    return (
      <div>
        <ClassBased_count />
      </div>
    );
  }
}

export default Myclass;