ruud00000 / bwa-u3-jammming-prj

0 stars 0 forks source link

Stateless functional components #4

Open ghost opened 7 years ago

ghost commented 7 years ago

The class syntax is the standard way to define a React component. But it's kind of a lot of ritual for a component that doesn't refer to this.state and only has a render() function (like Tracklist or SearchResults) .

In these situations, it's often preferable to write your component as a stateless functional component rather than a full blown component using class.

https://facebook.github.io/react/docs/components-and-props.html

ruud00000 commented 7 years ago

Aha,

so then SeachResultsTracks.js would look like:

import React from 'react';
import './SearchResultTracks.css';
import { TrackList } from '../TrackList/TrackList';

export function SearchResultTracks(props) {
  return (
    <div className="SearchResults">
      <h2>Results</h2>
      <TrackList
        addTrack={props.addTrack}
        action='+'
        tracks={props.searchResultTracks} />
    </div>
  );
}

Correct? It would still be a separate file in a seperate folder I guess?