ill not affect the other.

In this example, the ` Gallery ` component from earlier is rendered twice with
no changes to its logic. Try clicking the buttons inside each of the
galleries. Notice that their state is independent:

App.js  Gallery.js  data.js

App.js

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

    
    
    import Gallery from './Gallery.js';
    
    export default function Page() {
      return (
        <div className="Page">
          <Gallery />
          <Gallery />
        </div>
      );
    }
    
    

This is what makes state different from regular variables that you might
declare at the top of your module. State is not tied to a particular function
call or a place in the code, but it’s “local” to the specific place on the
screen. You rendered two ` <Gallery /> ` components, so their state is stored
separately.

Also notice how the ` Page ` component doesn’t “know” anything about the `
Gallery ` state or even whether it has any. Unlike props, **state is fully
private to the component declaring it.** The parent component can’t change it.
This lets you add state to any component or remove it without impacting the
rest of the components.

What if you wanted both galleries to keep their states in sync? The right way
to do it in React is to _remove_ state from child components and add it to
their closest shared parent. The next few pages will focus on organizing state
of a single component, but we will return to this topic in [ Sharing State
Between Components. ](/learn/sharing-state-between-components)

##  Recap

  * Use a state variable when a component needs to “remember” some information between renders. 
  * State variables are declared by calling the ` useState ` Hook. 
  * Hooks are special functions that start with ` use ` . They let you “hook into” React features like state. 
  * Hooks might remind you of imports: they need to be called unconditionally. Calling Hooks, including ` useState ` , is only valid at the top level of a component or another Hook. 
  * The ` useState ` Hook returns a pair of values: the current state and the function to update it. 
  * You can have more than one state variable. Internally, React matches them up by their order. 
  * State is private to the component. If you render it in two places, each copy gets its own state. 

##  Try out some challenges

1  .  Complete the gallery  2  .  Fix stuck form inputs  3  .  Fix a crash  4
.  Remove unnecessary state

####

Challenge  1  of  4  :

Complete the gallery

When you press “Next” on the last sculpture, the code crashes. Fix the logic
to prevent the crash. You may do this by adding extra logic to event handler
or by disabling the button when the action is not possible.

After fixing the crash, add a “Previous” button that shows the previous
sculpture. It shouldn’t crash on the first sculpture.

App.js  data.js

App.js

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

    
    
    import { useState } from 'react';
    import { sculptureList } from './data.js';
    
    export default function Gallery() {
      const [index, setIndex] = useState(0);
      const [showMore, setShowMore] = useState(false);
    
      function handleNextClick() {
        setIndex(index + 1);
      }
    
      function handleMoreClick() {
        setShowMore(!showMore);
      }
    
      let sculpture = sculptureList[index];
      return (
        <>
          <button onClick={handleNextClick}>
            Next
          </button>
          <h2>
            <i>{sculpture.name} </i> 
            by {sculpture.artist}
          </h2>
          <h3>  
            ({index + 1} of {sculptureList.length})
          </h3>
          <button onClick={handleMoreClick}>
            {showMore ? 'Hide' : 'Show'} details
          </button>
          {showMore && <p>{sculpture.description}</p>}