AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

bonjour,

J'ai utiliser la méthode 'put' comme dans le cour pour la mise a jours mais je me retrouve avec une erreur 400. L'ajout, la récupération et la suppression je n'ai aucu soucis mais pas pour la mise a jours 

Voici mon code :

import React, { useState, useEffect, useRef } from "react";
import "./App.css";
import styled from 'styled-components';
import axios from 'axios';

// Composants
import Eleve from "../../Components/Eleve/Eleve";
import MonComponentHoc from "../../HOC/MonComponentHoc/MonComponentHoc";
import Search from "../../Components/Search/Search";
import ThemeContextProvider from "../../context/theme-context";

 // 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([]);

  const [transformation, setTransformation] = useState(false);
  const [hide, setHide] = useState(true);

  // Etats
  useEffect(() => {
    console.log("[app.js] useEffect");

    // récupérer les éleves
    fetchSudents();

    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);

    axios.delete('https://react-project-4f36c-default-rtdb.europe-west1.firebasedatabase.app/eleves/' + eleves[index].id + '.json')
      .then(response => {
        console.log(response);
      })
  };

  const nameChangeHandler = (e, index) => {
    const newEleves = [...eleves];
    newEleves[index].nom = e.target.value;
    setEleves(newEleves);

    // Modification
    axios.put('https://react-project-4f36c-default-rtdb.europe-west1.firebasedatabase.app/eleves.json/' + eleves[index].id + '.json', 
    newEleves[index])
      .then(response => {
        console.log(response)
      });

  };

  const addStudentsClickHandler = () => {
    // console.log('boutton cliqué')
    const eleve = {
      nom: "Eleve générique",
      moyenne: Math.floor(Math.random() * 20),
      citation: "citation !",
    };

    axios.post('https://react-project-4f36c-default-rtdb.europe-west1.firebasedatabase.app/eleves.json', eleve)
      .then(response => {
        console.log(response);
        fetchSudents();
      });
      

  };

  const fetchSudents = () => {
    axios.get('https://react-project-4f36c-default-rtdb.europe-west1.firebasedatabase.app/eleves.json')
      .then(response => {
        console.log(response)

        const newStudent = [];

        // Filter (2eme option avec un if)
        
        for(let key in response.data){
          if(response.data[key].moyenne >= 10) {
            newStudent.push({
            ...response.data[key],
            id: key
        })
      }
        // Filter
        // const studentFliter = newStudent.filter(eleve => eleve.moyenne >= 10);
        // setEleves(studentFliter);

        setEleves(newStudent);
        
      }
      });
  }

  // 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 (
    <ThemeContextProvider>
      <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>

          <BtnStyled onClick={addStudentsClickHandler}>
            Ajouter eleve
          </BtnStyled>

        </div>

        <Search/>

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

export default App;