How to set the default value to props

Question

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

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, Aug 25 '20 at 20:03
Does this answer your question? [React functional component default props vs default parameters](https://stackoverflow.com/questions/47774695/react-functional-component-default-props-vs-default-parameters) — Emile Bergeron, Aug 25 '20 at 20:56
Even more details on [the different ways to define default props.](https://stackoverflow.com/q/41488537/1218980) but class components, while still supported, are no longer needed, so destructuring wins hands down. — Emile Bergeron, Aug 25 '20 at 20:59

Yatrix · Answer 1 · 2020-08-26T00:03:27.390

11

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.

edited Aug 26 '20 at 00:03

answered Aug 25 '20 at 20:04

Yatrix

13,361
16
48
78

Only `const Component = ({ property = 5000 }) => { ... }` is accepted, the rest of is deprecated (Dan Abramov words). – JaLe Aug 25 '20 at 20:09
@JaLe you're right. Answer adjusted. Please remove your downvote. https://github.com/yannickcr/eslint-plugin-react/issues/2396 – Yatrix Aug 26 '20 at 00:03

score 1 · Answer 2 · answered Aug 25 '20 at 20:11

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

score -2 · Answer 3 · answered Aug 25 '20 at 20:04

-2

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

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

Tooltip.defaultProps = {
delay: 100,
}

answered Aug 25 '20 at 20:04

Arian Nargesi

506
1
4
13

How to set the default value to props

3 Answers3