Discussions

Cannot read properties of null (reading 'focus')

Image

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 (
      <Eleve
        key={index}
        nom={eleve.nom}
        moyenne={eleve.moyenne}
        click={() => buttonClickHandler("Léa", index)}
        remove={() => removeClickHandler(index)}
        changeName={(e) => {nameChangeHandler(e, index)}}
        maRef={maVariableRef}
      >
      {eleve.citation}
      </Eleve>
    );
  })

 

  // JSX
  return (
    <div className="App">
      <h1>Bienvenue dans la classe</h1>
      {/* <h1 style={h1Style} >Bienvenue dans la classe</h1> style venant de l'objet */}
      <div className="btn">

        <BtnStyled transformed={transformation} onClick={btnHideClickHandler}>
          Afficher / masquer
        </BtnStyled>

        
        <BtnStyled transformed={transformation} onClick={buttonClickHandler.bind(this, "Test", 0)}>
          changer 1er prenom
        </BtnStyled>
      </div>

      {hide ? 
      <MonComponentHoc>
        {cartes}
      </MonComponentHoc>
      : null}
      
    </div>
  );
}

export default App;
2 réponses
Image
Alex Marchand
Le 01/06/2023 à 08:23

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 

Meilleure réponse
Image
Louis-Nicolas Leuillet
Le 01/06/2023 à 11:37

Un simple problème au niveau du cache je crois

Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.
Discussion résolue

Informations

Créée le 1 juin 2023 08:12
Dernière activité le 1 juin 2023 11:37