passing react hooks into component

Question

I'm new to React. I'm trying to add additional functionality of deleting the record from the list by setting the value.

here is my App.js

import React, { useState } from "react";
import data from "./data";
import List from "./List";

function App() {
  const [movies, setMovie] = useState(data);

  return (
    <main>
      <section className='container'>
        <h3>{movies.length} Movies to Watch</h3>
        <List movies={movies} setMovie />
        <button onClick={() => setMovie([])}>clear all</button>
      </section>
    </main>
  );
}

export default App;

In List.js, Im trying to delete the record when clicking on Watched button. Can I call setMovie inside the List component? is it a correct way?

List.js

import React from "react";

const List = ({ movies }, setMovie) => {
  return (
    <>
      {movies.map((movie) => {
        const { id, name, year, image } = movie;
        return (
          <article key={id} className='person'>
            <img src={image} alt={name} />
            <div>
              <h4>{name}</h4>
              <button
                className='btn'
                onClick={(id) =>
                  setMovie(movies.filter((movie) => movie.id !== id))
                }
              >
                watched
              </button>
              <p>{year}</p>
            </div>
          </article>
        );
      })}
    </>
  );
};

export default List;

maybe add status in movie obj like 'watchStatus' and change the status form true to false when click on watch. because by filtering it will just remove the movie form the list, right? — PakDragoon
– PakDragoon, Commented Sep 26, 2022 at 7:33
Looking at your components, besides the correction @Nicholas Tower already mentioned, I would suggest you split up your List component into a List and a Card component. Just a general separation of concern kinda thing — PiratePie
– PiratePie, Commented Sep 26, 2022 at 8:09

Nicholas Tower · Accepted Answer · 2022-09-26 07:43:04Z

3

You have two mistakes in your code. First:

<List movies={movies} setMovie />

This shorthand assigns a value of true to setMovie. To assign the setMovie function to it, you must instead do:

<List movies={movies} setMovie={setMovie} />

And secondly this:

const List = ({ movies }, setMovie) => {

Should be this:

const List = ({ movies, setMovie }) => {

answered Sep 26, 2022 at 7:43

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

André Alçada Padez · Accepted Answer · 2022-09-26 07:33:55Z

1

try:

<List movies={movies} setMovie={setMovie} />

this way the funcition will appear in the List component as a prop.

The way you were doing, it will just appear as true

answered Sep 26, 2022 at 7:33

André Alçada Padez

11.7k26 gold badges72 silver badges130 bronze badges

Collectives™ on Stack Overflow

passing react hooks into component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related