I'm unable to add a new user to the array of objects after submitting the form

MovieContext.js


import React,{createContext,useState} from 'react';

export const MovieContext=createContext();

export const MovieProvider=(props)=>{

  const moviesList=[{name:"Game of Throne",price:"$10",id:23124},

  {name:"Harry Potter",price:"$9",id:23125},

  {name:"Inception",price:"$20",id:23126},

  {name:"The dark kight",price:"$25",id:23127}

];

const [movies,setMovie]=useState(moviesList);

const numberOfMovies=movies.length;

return(

  <MovieContext.Provider value={[movies,setMovie]}>

    {props.children}

    </MovieContext.Provider>

)

}

MovieList.js

import React,{useState,useContext} from 'react';
import Movie from './Movie';
import {MovieContext} from './MovieContext';
import Nav from './Nav';
import App from './App';
const MovieList=(props)=>{
//   const moviesList=[{name:"Game of Throne",price:"$10",id:23124},
//   {name:"Harry Potter",price:"$9",id:23125},
//   {name:"Inception",price:"$20",id:23126}
// ];
// const [movies,setMovie]=useState(moviesList);
// const numberOfMovies=movies.length;
const [movies,setMovie]=useContext(MovieContext);
const deleteMovie=(id)=>{
  setMovie(movies.filter(movie=>movie.id!=id));
}
  
return(
  <div>
    {movies.map(movie=>(
    <Movie key={movie.id} name={movie.name} price={movie.price} />
    // <Nav length={numberOfMovies}/>
    ))}
    {/* <p>Hi {value}</p> */}

    </div>
);
}
export default MovieList;

AddMovie.js

import React,{useState,useContext} from 'react';

import { MovieContext } from './MovieContext';

const AddMovie=()=>{

  const initialState={movie:"",price:""}

  const [details,setDetails]=useState(initialState);

  const [movies,setMovie]=useContext(MovieContext);

  const updateName=(e)=>{

    const {name,value}=e.target;

    setDetails({...details,[name]:value});

  }

  movies.id=movies.length+1;

  const obj={name:details.movie,price:details.price,id:movies.id};

  const cinemas=[...movies,obj];

  console.log(cinemas);

//   console.log(obj);

  const addMovie=(e)=>{

   e.prevenDefault();

   movies.id=movies.length+1;

   const movie={name:details.movie,price:details.price,id:movies.id};

   setMovie([...movies,movie]);

  }

  return(

    <form onSubmit={addMovie}>

      <input type="text" name="movie" placeholder="movie" value={details.movie} onChange={updateName}/>

        <input type="text" name="price" placeholder="price" value={details.price} onChange={updateName}/>

        <button type="submit">Submit</button>

      </form>

  )

}

export default AddMovie;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.