Why can't my button render on loacalhost.3000? - css

Question

my button can't compile and the mistake is:"./src/components/Button.js
Line 2: 'React' must be in scope when using JSX react/react-in-jsx-scope". Does anybody know the problem? pls help! Thank you!
"This is my Header.js:
import PropTypes from 'prop-types';
import Button from './Button'
const Header = ({title}) => {
return (
<header className="header">
<h1>{title}</h1>
<Button />
</header>
)
}
Header.defaultProps ={
title:'Task Tracker '
}
Header.propTypes={
title:PropTypes.string.isRequired,
}
// css in js
// const headingStyle = {
// color:'red',
// backgroundColor:'blue'
// }
export default Header
This is my Button.js:
const Button = () => {
return <button className="btn">Add</button>
}
export default Button
My Header.js and Button.js are inside my components folder which is inside my src folder
This is my index.css which is inside my src folder too:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 500px;
margin: 30px auto;
overflow: auto;
min-height: 300px;
border: 1px solid steelblue;
padding: 30px;
border-radius: 5px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn:focus {
outline: none;
}
.btn:active {
transform: scale(0.98);
}
.btn-block {
display: block;
width: 100%;
}
.task {
background: #f4f4f4;
margin: 5px;
padding: 10px 20px;
cursor: pointer;
}
.task.reminder {
border-left: 5px solid green;
}
.task h3 {
display: flex;
align-items: center;
justify-content: space-between;
}
.add-form {
margin-bottom: 40px;
}
.form-control {
margin: 20px 0;
}
.form-control label {
display: block;
}
.form-control input {
width: 100%;
height: 40px;
margin: 5px;
padding: 3px 7px;
font-size: 17px;
}
.form-control-check {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-check label {
flex: 1;
}
.form-control-check input {
flex: 2;
height: 20px;
}
footer {
margin-top: 30px;
text-align: center;
}

Answer 1

try this code :
export const Button = () => {
return <button className="btn">Add</button>
}
import {Button} from './Button'

Answer 2

adding on to Vuk Vucic comment:
Vucic mentioned that you need to import React when using functional components, but as of React 17 (if compiled using babel), top line import React from 'react' is no longer needed. You now only need to import react-specific hooks
like import { useEffect() } from 'react';
However, if it isn't comiled via Babel, you need to import React.
in this case, it looks like you do need to import React from 'react';
helpful article
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html