To access a state variable declared in a child component in the parent component, you can use props.

1. In the child component, declare a state variable and a function to update that variable, and pass both as props to the parent component: ```jsx // Child component import React, { useState } from 'react';

const ChildComponent = ({ onStateChange }) => { const [childState, setChildState] = useState('');

const handleChange = (e) => { const value = e.target.value; setChildState(value); onStateChange(value); };

return ( ); }

export default ChildComponent;

code
 
 
Copy code

2. In the parent component, define a state variable and a function to update that variable. Pass the function as a prop to the child component:
```jsx
// Parent component
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [parentState, setParentState] = useState('');

  const handleStateChange = (value) => {
    setParentState(value);
  };

  return (
    <div>
      <p>Parent state: {parentState}</p>
      <ChildComponent onStateChange={handleStateChange} />
    </div>
  );
}

export default ParentComponent;

In this example, the child component declares its own state variable childState. The handleChange function updates childState and calls the onStateChange function passed from the parent component. In the parent component, the handleStateChange function updates the parentState variable when onStateChange is called.

Now, whenever the child component updates its state, it will also trigger the state update in the parent component. You can then access and use the child component's state in the parent component through parentState.

To pass a state variable declared in one component to another component in React, you can use props. Here's how you can do it:

1. In the component where the state variable is declared, pass it as a prop to the other component when rendering it. ```jsx // ParentComponent.js

import React, { useState } from 'react'; import ChildComponent from './ChildComponent';

function ParentComponent() { const [stateVariable, setStateVariable] = useState('Hello');

return (

export default ParentComponent;

code
 
 
Copy code

2. In the receiving component, define props as a parameter and access the state variable through props.
```jsx
// ChildComponent.js

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>State variable from parent component: {props.stateProp}</p>
    </div>
  );
}

export default ChildComponent;

In this example, the state variable stateVariable from the ParentComponent is passed to the ChildComponent using the prop stateProp. The ChildComponent can then access and display the value of stateProp.

For more information, you can refer to the React documentation on props: React - Components and Props