{ person, size }) {
      return (
        <img
          className="avatar"
          src={getImageUrl(person)}
          alt={person.name}
          width={size}
          height={size}
        />
      );
    }
    
    function Card({ children }) {
      return (
        <div className="card">
          {children}
        </div>
      );
    }
    
    

Show more

##  Ready to learn this topic?

Read **[ Passing Props to a Component ](/learn/passing-props-to-a-component)
** to learn how to pass and read props.

[ Read More  ](/learn/passing-props-to-a-component)

* * *

##  Conditional rendering

Your components will often need to display different things depending on
different conditions. In React, you can conditionally render JSX using
JavaScript syntax like ` if ` statements, ` && ` , and ` ? : ` operators.

In this example, the JavaScript ` && ` operator is used to conditionally
render a checkmark:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    function Item({ name, isPacked }) {
      return (
        <li className="item">
          {name} {isPacked && '✔'}
        </li>
      );
    }
    
    export default function PackingList() {
      return (
        <section>
          <h1>Sally Ride's Packing List</h1>
          <ul>
            <Item
              isPacked={true}
              name="Space suit"
            />
            <Item
              isPacked={true}
              name="Helmet with a golden leaf"
            />
            <Item
              isPacked={false}
              name="Photo of Tam"
            />
          </ul>
        </section>
      );
    }
    
    

Show more

##  Ready to learn this topic?

Read **[ Conditional Rendering ](/learn/conditional-rendering) ** to learn the
different ways to render content conditionally.

[ Read More  ](/learn/conditional-rendering)

* * *

##  Rendering lists

You will often want to display multiple similar components from a collection
of data. You can use JavaScript’s ` filter() ` and ` map() ` with React to
filter and transform your array of data into an array of components.

For each array item, you will need to specify a ` key ` . Usually, you will
want to use an ID from the database as a ` key ` . Keys let React keep track
of each item’s place in the list even if the list changes.

App.js  data.js  utils.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { people } from './data.js';
    import { getImageUrl } from './utils.js';
    
    export default function List() {
      const listItems = people.map(person =>
        <li key={person.id}>
          <img
            src={getImageUrl(person)}
            alt={person.name}
          />
          <p>
            <b>{person.name}:</b>
            {' ' + person.profession + ' '}
            known for {person.accomplishment}
          </p>
        </li>
      );
      return (
        <article>
          <h1>Scientists</h1>
          <ul>{listItems}</ul>
        </article>
      );
    }
    
    

Show more

##  Ready to learn this topic?

Read **[ Rendering Lists ](/learn/rendering-lists) ** to learn how to render a
list of components, and how to choose a key.

[ Read More  ](/learn/rendering-lists)

* * *

##  Keeping components pure

Some JavaScript functions are _pure._ A pure function:

  * **Minds its own business.** It does not change any objects or variables that existed before it was called. 
  * **Same inputs, same output.** Given the same inputs, a pure function should always return the same result. 

By strictly only writing your components as pure functions, you can avoid an
entire class of baffling bugs and unpredictable behavior as your codebase
grows. Here is an example of an impure component:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define