'React' must be in scope when using JSX
14 };
15
16 return (
17 <form onSubmit={submitSearch} className="Search">18 <input
19 className="input-search"
20 id="search"'React' must be in scope when using JSX
15
16 return (
17 <form onSubmit={submitSearch} className="Search">
18 <input19 className="input-search"20 id="search"21 type="search"22 onChange={buscaInput}23 />24 <button className="button-search" type="submit">
25 Search
26 </button>'React' must be in scope when using JSX
9
10 return filtro?.map((item) => (
11 <div className="item" key={parseInt(item.objectID)}>
12 <Book item={item} />13 </div>
14 ));
15};'React' must be in scope when using JSX
8 });
9
10 return filtro?.map((item) => (
11 <div className="item" key={parseInt(item.objectID)}>12 <Book item={item} />
13 </div>
14 ));'React' must be in scope when using JSX
1import "./style.css";
2const Footer = (props) => {
3 return (
4 <section className="footer"> 5 <p>{props.info}</p>
6 </section>
7 );'React' must be in scope when using JSX
2const Footer = (props) => {
3 return (
4 <section className="footer">
5 <p>{props.info}</p> 6 </section>
7 );
8};'React' must be in scope when using JSX
5 <h2>{props.item?.title}</h2>
6 <h3> {props.item?.author || "Sem Autor"} </h3>
7 <h3>
8 <a href={props.item?.url || ""}> {"Saiba Mais" || "Sem Link"} </a> 9 </h3>
10 </div>
11 );'React' must be in scope when using JSX
4 <div className="item" key={parseInt(props.item?.objectID)}>
5 <h2>{props.item?.title}</h2>
6 <h3> {props.item?.author || "Sem Autor"} </h3>
7 <h3> 8 <a href={props.item?.url || ""}> {"Saiba Mais" || "Sem Link"} </a>
9 </h3>
10 </div>
Description
The React object contains many objects that are referenced indirectly when expanding JSX.
When using JSX, <a /> expands to React.createElement("a").
Therefore React must be imported.
Bad Practice
const Hello = <div>Hello {this.props.name}</div>;
Recommended
import React from 'react';
const Hello = <div>Hello {this.props.name}</div>;