The below code fetch the URL data and retrieve All the film list with the duration in seconds But I want to list out only the films which have duration more than 5000 secs *The component should have a prop minDuration and only films with a duration more than this value should be listed; the default value for this prop should be 5000

Could you please clarify how to solve this

    import React, { useState, useEffect } from "react";

export default function App() {
  const [films, setFilms] = useState([]);
  
  useEffect(() => {
    const listOfFilms = async () => {
      const response = await fetch(
        ";
      );
      console.log("here", response.data);
      const jsonresponse = await response.json();
      console.log("here11", jsonresponse.films);
      setFilms(jsonresponse.films);
    };
    listOfFilms();
  }, []);
  return (
    <div className="App">
      <h1>Film Title</h1>
      {console.log("films", films.slug, films.films)}

      {films.map((film, index) => (
          <ul>
            <li key={film.title}>
           {film.title} {`(${film.duration_seconds})`} </li>
        </ul>
      ))}
    </div>
  );
}

The below code fetch the URL data and retrieve All the film list with the duration in seconds But I want to list out only the films which have duration more than 5000 secs *The component should have a prop minDuration and only films with a duration more than this value should be listed; the default value for this prop should be 5000

Could you please clarify how to solve this

    import React, { useState, useEffect } from "react";

export default function App() {
  const [films, setFilms] = useState([]);
  
  useEffect(() => {
    const listOfFilms = async () => {
      const response = await fetch(
        "https://api.flixpremiere.com/v1/films/filter/now_showing?limit=10"
      );
      console.log("here", response.data);
      const jsonresponse = await response.json();
      console.log("here11", jsonresponse.films);
      setFilms(jsonresponse.films);
    };
    listOfFilms();
  }, []);
  return (
    <div className="App">
      <h1>Film Title</h1>
      {console.log("films", films.slug, films.films)}

      {films.map((film, index) => (
          <ul>
            <li key={film.title}>
           {film.title} {`(${film.duration_seconds})`} </li>
        </ul>
      ))}
    </div>
  );
}

• javascript
• reactjs
• react-props

• you can use array.filter, to filter your array to only contain films with a duration over 5000 films.filter(film=>film.duration_seconds > 5000) – WebbH Commented Aug 25, 2020 at 20:03
• Does this answer your question? React functional component default props vs default parameters – Emile Bergeron Commented Aug 25, 2020 at 20:56
• Even more details on the different ways to define default props. but class components, while still supported, are no longer needed, so destructuring wins hands down. – Emile Bergeron Commented Aug 25, 2020 at 20:59

3 Answers 3

I'm going to answer the question as it's written, which is "How to set the default value to props".

const Component = ({ property = 5000 }) => { ... }

If you want to only show certain items based on criteria, use the filter function.

The only one way is use default parameter in your function component.

const Component = ({ iNeedDefaultValue = "foo" }) => { ... }

The rest of is deprecated (words of "father of react").

Because defaultProps on functions will eventually get deprecated.

See: https://twitter.com/dan_abramov/status/1133878326358171650

for setting default props for a component, you can use of defaultProps property

class Tooltip extends React.Component {
// ...
}

Tooltip.defaultProps = {
delay: 100,
}