react must be in scope when using jsx error

Question

Very Simple code , I'hv checked react spelling, ReactDom imported, Please guide me about the error. I am new to the codding world.


import React, { Component } from "react";
import "./App.css";
import { Cardlist } from "./components/cardlist/cardlist.component.jsx";

class App extends Component {
  constructor() {
    super();
    this.state = {
      string: "Hello before",
    };
  }

  render() {
    return (
      <div className="App">
        <p>{this.state.string}</p>
        <button onClick={() => this.setState({ string: "After text" })}>
          Change text
        </button>
        <Cardlist name="this was prop" />
      </div>
    );
  }
}

export default App;

Cardlist component

import react from "react";

export const Cardlist = (props) => {
  console.log(props);
  return <div>COngratulations</div>;
};

I have just edited my question , with cardlist component, Please check. Thanks in advance dipansh — Sudarshan Mane, Jun 29 '20 at 21:59
Can you try changing that `react` to `React` on first line on CardList ? — Dipansh Khandelwal, Jun 29 '20 at 21:59
Does this answer your question? ['React' must be in scope when using JSX react/react-in-jsx-scope?](https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope) — Henry Woody, Oct 24 '22 at 21:27

score 0 · Accepted Answer · answered Jun 29 '20 at 21:59

0

Try changing that react to React on first line on CardList ?

answered Jun 29 '20 at 21:59

Dipansh Khandelwal

601
4
8

react must be in scope when using jsx error

1 Answers1