Props can be used to contain any data. For instance, imagine that you have the following array of movie objects (here the array is hard-coded; later you will learn how to populate such an array in React using an external API).

const movieData = [
   { id:17, title:"American Beauty", year:1999 },
   { id:651, title:"Sense and Sensibility", year:1995 },
   { id:1144, title:"Casablanca", year:1942 }
];

You could pass this array into a component via props:

<MovieList movies={movieData} />

How would MovieList then display this data? One way would be to iterate through the array and create an array of <li> items:

const MovieList = (props) => {
   const items = [];
   for (let m of props.movies) {
      items.push( <li>{m.title}</li> );
   }
   return <ul>{ items }</ul>;
}

A more concise approach (and the one that you will likely see when examining React code online) is to use the map() array function covered in Chapter 10 (recall that map() is used to transform each element in an array into something else; it returns an array of the same size but with transformed elements).

const MovieList = (props) => {
   const items = props.movies.map( m => <li>{m.title}</li> );
   return <ul>{ items }</ul>;
}

If you examined the result in the browser, you would see this React warning in the console: Each child in a list should have a unique "key" prop. React uses keys to uniquely identify child elements in a collection of elements. While you don’t always need this capability, it is relatively easy to add a unique key to each item using an index provided by map():

props.movies.map( (m,indx) => <li key={indx}>{m.title}</li> );

In the above example, the temporary variable items is created, but it is not actually necessary. It is common to instead to use map() directly in the return as shown in the following example. Notice also that instead of using the index from the map, it uses the id property of the movie object as the unique key value.

const MovieList = (props) => {
   return (
     <ul>{ props.movies.map( m => <li key={m.id}>{m.title}</li>) }</ul>
   );
}

This code is, however, starting to get a little complicated. We might decide to separate out the <li> elements as their own component, as shown in Listing 11.2.

const App = (props) => {
   const movieData = [
      { id: 17, title: "American Beauty", year: 1999 },
      { id: 651, title: "Sense and Sensibility", year: 1995 },
      { id:1144, title: "Casablanca", year:1942 }
   ];
   return (
     <main>
        <Title label="Iterating a Props Array" />
        <MovieList movies={movieData} />
     </main>
   );
}
const MovieList = (props) => {
   return (
     <ul>
        { props.movies.map( m => <MovieListItem movie={m} key={m.id} />)}
     </ul>
   );
}
const MovieListItem = (props) => {
   return <li>{props.movie.title}</li>;
}
const Title = function(props) {
   return <h2>{props.label}</h2>;
};
ReactDOM.render(<App />, document.querySelector('#react-container'));

What if you wanted to use props in a class component? In the next section on state, you will discover that working with state in a class component requires adding a constructor function to the class. When a constructor function is used in a class component, then some additional code for props is required, as shown in Listing 11.3. Notice that within the render() function, access to the props variable is through the this keyword because it is defined within React.Component.

class Company extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return (
        <div className="card">
           <h2>{this.props.name}</h2>
           <p>{this.props.description}</p>
        </div>
      );
   }
}

The examples so far have all passed props data via attributes on the element, but there is another way that you may occasionally encounter. For instance, in Listing 11.2, there was the following element:

<Title label="Iterating a Props Array" />

An alternative way to pass the label information would be by nesting the data as child content rather than using an attribute:

<Title>Iterating a Props Array</Title>

Within the Title component, you could access this nested data by using props.children:

const Title = function(props) {
   return <h2>{props.children}</h2>;
};

What if MovieListItem was a class component instead? It would need to reference the function handler with the this keyword, as shown in the following.

class MovieListItem extends React.Component {
   handleClick = () => {
      alert('handling the click id=' + this.props.movie.id);
   }
   render() {
      return (
      <li>
         {this.props.movie.title}
         <button onClick={this.handleClick}>View</button>
      </li>);
   }
}

There is one big potential “gotcha” with event handlers in React class components. In the previous code, the handleClick function was defined using arrow syntax. This works as you’d expect due to the changed nature of this in arrow functions (recall from Chapter 8 that in arrow functions this refers to lexical context not the run-time context). But what if you had not defined handleClick using arrow syntax. The this keyword would have the wrong binding and the reference to this.handleClick would not work. Prior to arrow functions, React developer would typically address this limitation by explicitly binding "this" to each function directly within the constructor, as shown in the following:

class MovieListItem extends React.Component {
   constructor(props) {
      super(props);

       // bind "this"
      this.handleClick = this.handleClick.bind(this);
   }
   ...
}

In the previous examples of using event handlers in React, the handler had no parameters. React event handlers can also accept an event parameter (typically named e) just like the regular JavaScript event handlers you used in Chapters 9 and 10. But what if you wanted to pass some other data to the handler? In Listing 11.4 you can see how this is typically achieved in React.

const App = (props) => {
   const movieData = [{ id: 17, title: "American Beauty", year: 1999 }, ... ];

   const handleClick = (movie) => {
      alert('handling the click for ' + movie.title);
   }
   return (
      <ul>
         { movieData.map( m =>
              <li><button onClick={ () => handleClick(m) }>
                     View {m.title} </button></li>
         )}
      </ul> );
}

Notice that the event handler is another function (defined using arrow syntax) with no parameter; this function calls the handleClick function, passing it the data it requires. What if it also needed the e event parameter also? We would need to include it in our invocation:

onClick={ (e) => handleClick(e, m) }

In the example components we have examined so far, they always rendered the same content (though customized by props data). It is quite common for components to render different content based on state data, which is known as conditional­rendering. For instance, imagine we have a component that displays information about a single company along with an edit button. If the user clicks on the edit button, the component will instead display the information within a form (and also change the label on the edit button to “Save”). Listing 11.5 illustrates an example of conditional rendering. Notice that the render() function calls two different ­methods (renderNormal and renderEdit) based on the status of the editing state variable, which gets changed in response to user actions. Figure 11.8 illustrates the two different possible appearances of the Company component.

class Company extends React.Component {
   constructor(props) {
      super(props);
      this.state = {editing: false};
   }
   editClick = () => {
      this.setState( {editing: true} );
   }
   saveClick = () => {
      this.setState( {editing: false} );
   }
   render() {
      if (this.state.editing) {
         return this.renderEdit();
      }
      else {
         return this.renderNormal();
      }
   }
   renderNormal() {
      return (
         <article>
            <h2>{this.props.children} </h2>
            <p>Symbol {this.props.symbol}</p>
            <p>Sector: {this.props.sector}</p>
            <p>HQ: {this.props.hq}</p>
            <button onClick={this.editClick}>Edit</button>
         </article>
      );
   }
   renderEdit() {
      return (
         <article>
            <h2>input type="text" defaultValue={this.props.children}</h2>
            <p>Symbol:<input type="text"                  defaultValue={this.props.symbol} /></p>
            <p>Sector:<input type="text"                              defaultValue ={this.props.sector} /></p>
            <p>HQ: <input type="text" defaultValue={this.props.hq} /></p>
            <button onClick={this.saveClick}>Save</button>
         </article>
      );
   }
}

Figure 11.8 Conditional rendering of Listing 11.5

Hooks were added to React in version 16.8 (March 2019), and provided new approaches to several common React tasks. Perhaps the most important of these was its new approach to working with state, one that allowed functional components to use state. Figure 11.9 illustrates the use of Hooks that is equivalent to that shown in Listing 11.5.

In general, functional components require less code than class components. Writing less code generally means fewer bugs. Now that React Hooks allows functional components to work with state and lifecycle methods, it is likely that functional components with Hooks will become the preferred approach amongst most developers moving forward.

Note

In Figure 11.9, the useState() function is prefaced with a reference to the React object. In Section 11.4 and beyond, you will be making use of modules and an import statement which will mean you can simply call the useState function:

const [edit, setEdit] = useState(false);

Figure 11.9 Using hooks to provide state to functional components

With controlled form components, the form’s state is managed by the developer using React state. Generally speaking, this is the preferred approach to working with forms in React. In this approach, you will set the form element’s value using the value attribute, and update the underlying state when the form element's value changes. For instance, if you were using a class component, your render() function might have something similar to the following for one of the form elements:

<input type="text" name="sector" value={this.state.sector}
       onChange={this.handleSectorChange}  />

The class component would then need to implement the handler method which would update the component state with the current value of the element:

class SampleForm extends React.Component {
   constructor(props) {
      super(props);
      this.state = { sector: "", ... };
   }
   handleSectorChange = (e) => {
      this.setState( {sector: e.target.value} );
   }
   ...
}

With React Hooks, controlled form components can be used within functional components as well. Listing 11.6 illustrates how the edit form in Listing 11.5 could be implemented using controlled form components and React Hooks. Notice that instead of creating individual handler functions, the code in the listing simply passes an anonymous function which calls the setter function for the state value.

const Company = (props) => {
   ...
   const renderEdit = () => {
      return (
         <article className="box media ">
            <div className="media-content">
               <h2><input type="text" value={name}
                   onChange={ (e) => setName( e.target.value ) } /></h2>
               <p>Symbol: <input type="text" value={symbol}
                   onChange={ (e) => setSymbol( e.target.value ) } /></p>
               <p>Sector: <input type="text" value={sector}
                   onChange={ (e) => setSector( e.target.value ) } /></p>
               <p>HQ: <input type="text" value={hq}
                   onChange={ (e) => setHq( e.target.value ) } /></p>
            </div>
            ...
         </article>
      );
   };
   const [editing, setEditing] = React.useState(false);
   // initialize the state variables to the data passed into the component
   const [ name, setName] = React.useState( props.children );
   const [ symbol, setSymbol] = React.useState( props.symbol );
   const [ sector, setSector] = React.useState( props.sector );
   const [ hq, setHq] = React.useState( props.hq );
   ...
}

With uncontrolled form components, the form’s state is managed by the DOM: you no longer need to create handler methods for form state updates. Instead, you retrieve the values from the form using a special ref object. What is a ref? It is a special object in React that allows you to access DOM nodes. You can think of it as a type of pointer into a DOM element.

For instance, let’s imagine you have a class component that will display the form. With the uncontrolled approach, you will generally create instance variables which will contain the references to the different DOM elements:

class SampleForm extends React.Component {
   constructor(props) {
     super(props);
     // setting instance variables to refs
     this.symbol = React.createRef();
     this.sector = React.createRef();
   }
   render() {
     return (
        <form onSubmit={this.handleSubmit} >
          <input name="symbol" type="text" ref={this.symbol} />
          <input name="sector" type="text" ref={this.sector} />
          <input type="submit" />
        </form>
     );
   }
   handleSubmit = (e) => {
     e.preventDefault();
     let values = `Current values are
            ${this.symbol.current.value}
            ${this.sector.current.value}`;
     alert(values);
   }
}

Notice that current property of each ref object is used to reference the underlying DOM property or method. In this case, the code is interested in the form element’s value property, but you can access any DOM property or method via current.

So which should you use? There is some debate about this question; some argue that letting the browser maintain state for long and complex forms is sensible, especially if you need access to DOM events such as focus. On the other hand, the official React documents state that in general you should use controlled form components.