React) custom Hook 1

import useInputs from './useInputs';

const Info = () => {
    const [state, onChange] = useInputs({
        name : '',
        nickname: ''
    });
    const {name, nickname} = state;

    return (
        <div>
            <div>
                <input name = "name" value = {name} onChange = {onChange}/>
                <input name = "nickname" value = {nickname} onChange = {onChange}/>
            </div>
            <div>
                <div>
                    <b>name : </b> {name}
                </div>
                <div>
                    <b>nickname : </b> {nickname}
                </div>
            </div>
        </div>
    );
};

//App.js
// import Info from './info';
//
// const App = () => {
//     return <Info/>;
// };
//
// export default App;
export default Info;

### Component Overview

1. **Custom Hook Import**:
   ```javascript
   import useInputs from './useInputs';
   ```
   - This imports `useInputs`, a custom hook defined in another file. The purpose of this hook is likely to manage the state and handleChange logic for form inputs, making the component cleaner and more maintainable.

2. **Component Definition**:
   ```javascript
   const Info = () => {
   ```
   - `Info` is defined as a functional component. Inside this component, the custom hook `useInputs` is used.

3. **Using the Custom Hook**:
   ```javascript
   const [state, onChange] = useInputs({
       name: '',
       nickname: ''
   });
   ```
   - The `useInputs` hook is initialized with an object containing two properties: `name` and `nickname`, both set to empty strings. This suggests that the hook returns a state object and a function to handle changes.
   - The state object (`state`) and the change handler (`onChange`) are destructured from the hook's return value. This setup allows the component to directly use these values without additional boilerplate.

4. **State Destructuring**:
   ```javascript
   const {name, nickname} = state;
   ```
   - This line destructures the `name` and `nickname` properties from the state object provided by the `useInputs` hook. This destructuring makes it easy to access these values for rendering and assigning them to input elements.

5. **JSX Rendering**:
   ```javascript
   return (
       <div>
           <div>
               <input name="name" value={name} onChange={onChange}/>
               <input name="nickname" value={nickname} onChange={onChange}/>
           </div>
           <div>
               <div>
                   <b>name : </b> {name}
               </div>
               <div>
                   <b>nickname : </b> {nickname}
               </div>
           </div>
       </div>
   );
   ```
   - The component renders two `input` fields, one for `name` and another for `nickname`. Both inputs use the `onChange` function from the `useInputs` hook to handle changes, and their values are controlled by the corresponding state properties.
   - Additionally, the component displays the values of `name` and `nickname` in a formatted way, allowing users to see real-time updates as they type into the inputs.

### Summary

This implementation is an effective demonstration of using custom hooks in React to handle form inputs. Custom hooks like `useInputs` help abstract and reuse stateful logic across different components, promoting cleaner and more maintainable code. Here are some potential benefits and use cases of this pattern:

- **Reusability**: The `useInputs` hook can be used across multiple components that require similar logic for handling form data, reducing redundancy and promoting consistency.
- **Simplicity**: By abstracting the state management and event handling into a custom hook, the component itself remains simple and focused on rendering logic.

The component and the custom hook combined provide a robust solution for managing form states in React applications, especially when multiple forms or complex structures are involved.