Tengo este método de procesamiento, dentro del cual estoy creando una category de variable local. Necesito establecer el valor de esta variable dentro del html en la declaración de devolución usando JSX.
Estoy usando corchetes para asignar el valor a la variable local, pero esto no me funciona. por ejemplo {category='business'}
Esto es lo que estoy haciendo actualmente
export default class App extends Component { render() { let category = 'about'; return ( <Router> <div> <NavBar/> <Switch> <Route path="/about"> </Route> <Route path="/business"> {category='business'} </Route> <Route path="/entertainment"> {category='entertainment'} </Route> <Route path="/general"> {category='general'} </Route> <Route path="/health"> {category='health'} </Route> <Route path="/science"> {category='science'} </Route> <Route path="/sports"> {category='sports'} </Route> </Switch> <News pageSize={5} country="in" category={category}/> </div> </Router> ) } }En cambio, este muestra la categoría en la pantalla.
Nota: sé que hay varias formas en que puedo lograr esto, pero quería saber cómo establecer una variable local dentro de mi método
Lo que intenta hacer es cambiar el estado de la variable. Los ganchos useState y useEffect de Cue React (el componente debe ser un componente funcional para que los ganchos funcionen).
Primero importa el gancho:
import { useState } from 'react';Entonces, en tu caso:
const [category, setCategory] = useState('about') // initial valuey cuando necesites actualizarlo:
setCategory('science') // new value