Cannot read properties of null (reading 'focus')

Question

bonjour, je me retrouve avec cette erreur "Cannot read properties of null (reading 'focus')" , après de multiples recherches je ne comprends pas d'où cela peut venir. J'utuilise la version 18 de React. Pourriez vous m'apporter de l'aide ? import React, { useState, useEffect, useRef } from "react"; import "./App.css"; import styled from 'styled-components'; // Composants import Eleve from "../../Components/Eleve/Eleve"; import MonComponentHoc from "../../HOC/MonComponentHoc/MonComponentHoc"; // Css Avec styled component const BtnStyled = styled.button` padding: 10px 30px; background-color: ${props => props.transformed ? 'green' : 'black'}; color: white; cursor: pointer; &:hover { background-color: ${props => props.transformed ? 'lightgreen' : 'white'}; color: ${props => props.transformed ? 'white' : 'black'};; } `; function App() { // states const [eleves, setEleves] = useState([ { id: "1", nom: "Eva Dupont", moyenne: 10, citation: "citation !", }, { id: "2", nom: "Elon Musk", moyenne: 5, citation: "citation !", }, ]); const [transformation, setTransformation] = useState(false); const [hide, setHide] = useState(true); // Etats useEffect(() => { console.log("[app.js] useEffect"); return () => { console.log("[App.js] useEffect (didUnmount)"); }; }, []); useEffect(() => { console.log("[app.js] useEffect (didUpdate)"); }); // fonctions const buttonClickHandler = (newPrenom, index) => { const newEleves = [...eleves]; newEleves[index].nom = newPrenom; setEleves(newEleves); setTransformation(true); inputElem.current.focus(); }; const btnHideClickHandler = () => { setHide(!hide) }; const removeClickHandler = (index) => { // console.log(index); const newEleves = [...eleves]; newEleves.splice(index, 1); setEleves(newEleves); }; const nameChangeHandler = (e, index) => { const newEleves = [...eleves]; newEleves[index].nom = e.target.value; setEleves(newEleves); }; // Objet javascript pour utiliser du style par exemple // const h1Style = { // color: "green", // backgroundColor: "lightgreen", // }; const inputElem = useRef(null); let cartes = eleves.map((eleve, index) => { let maVariableRef = null; if(index === 0) { maVariableRef = inputElem; }; return ( buttonClickHandler("Léa", index)} remove={() => removeClickHandler(index)} changeName={(e) => {nameChangeHandler(e, index)}} maRef={maVariableRef} > {eleve.citation} ); }) // JSX return (

Bienvenue dans la classe

{/*

Bienvenue dans la classe

style venant de l'objet */}

Afficher / masquer changer 1er prenom

{hide ? {cartes} : null}

); } export default App;

Alex Marchand · Accepted Answer

Problèmes résolu. Après avoir refresh la page le problème était toujours présent. J'ai du couper le serveur de dev puis le relancer et cela fonctionne maintenant. Je ne comprends pas

Louis-Nicolas Leuillet · Answer

Un simple problème au niveau du cache je crois

Cannot read properties of null (reading 'focus')

Créez des sites internet interactifs avec React 16 et Redux