Este componente busca cursos con el uso de palabras clave. Necesito ayuda para rediseñarlo para que sea un componente funcional. Necesito un poco de orientación, así que también aprendería a hacer esto paso a paso.
const courses = [ 'Economics', 'Math II', 'Math I' ]; class SearchBar extends React.Component { constructor(props) { super(props); this.state = { search: [] } } render() { let options; if (this.state.search.length) { const searchPattern = new RegExp(this.state.search.map(term => `(?=.*${term})`).join(''), 'i'); options = courses.filter(option => option.match(searchPattern) ); } else { options = courses; } return ( <div> <input type="text" onChange={(e) => this.setState({ search: e.target.value.split(' ') })} /> <ul> {options.map((option, i) => <li key={option + i}>{option}</li> )} </ul> </div> ) } } ReactDOM.render(<SearchBar />, document.body) <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>Si conoce el ciclo de vida de un componente de clase, no tendrá problemas para comprender cómo funciona un componente funcional.
El principal interés de los componentes funcionales es el uso de ganchos.
Aquí está el documento de reaccionar sobre los componentes: https://fr.reactjs.org/docs/components-and-props.html
Aquí está el documento de reaccionar sobre los ganchos: https://fr.reactjs.org/docs/hooks-intro.html
Aquí hay un ejemplo para su componente funcional:
function SearchBar() { const [search, setSearch] = useState([]); let options; if (search.length) { const searchPattern = new RegExp(search.map(term => `(?=.*${term})`).join(''), 'i'); options = courses.filter(option => option.match(searchPattern) ); } else { options = courses; } return ( <div> <input type="text" onChange={(e) => setSearch(e.target.value.split(' '))}/> <ul> {options.map((option, i) => <li key={option+i}>{option}</li> )} </ul> </div> ) } ReactDOM.render(<SearchBar />, document.body)