Tengo un componente de reacción que toma la entrada de un formulario de texto materialUi y usa un enlace useState para actualizar. Al enviar, quiero que actualice otra variable al valor. Esto se está utilizando en un elemento h1. Sin embargo, el elemento h1 no se actualiza. Sé que la variable se está actualizando porque la registro en la consola y se actualiza.
import React, { useState } from 'react'; import CssBaseline from '@mui/material/CssBaseline'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import Alert from '@mui/material/Alert'; import { TextField } from '@mui/material'; import Button from '@mui/material/Button'; import './style.css'; import { useEffect } from 'react'; const darkTheme = createTheme({ palette: { mode: 'dark', }, }); export default function App() { const [myValue, setValue] = useState('') // The original hook let headingText = 'Hello World' let onSubmit = (e) => { e.preventDefault(); headingText = myValue; console.log(headingText); console.log(myValue); }; return ( <> <title>Text Changer</title> <div className='joe'> <ThemeProvider theme={darkTheme}> <React.Fragment> <CssBaseline /> <Alert severity="success">Page Loaded</Alert> <h1>{headingText}</h1> // the h1 I want to update <form onSubmit={onSubmit}> <TextField id="outlined-basic" label="Search Text" variant="outlined" value={myValue} onChange={(e) => setValue(e.target.value)}/> <br /> <br /> <Button variant="contained" color="primary" type="submit">Submit</Button> </form> </React.Fragment> </ThemeProvider> </div> </> ); }Querrás useState para eso también
const [headingText, setHeadingText] = useState('Hello World'); // ... setHeadingText(myValue);Tienes que crear un estado como
const [headingText, setHeadingText] = useState("Hello World"); y luego al hacer onClick en un botón, debe actualizar el estado. React volverá a renderizar el componente si el estado cambia
let onSubmit = (e) => { e.preventDefault(); setHeadingText(myValue); };