React Hooks - 我如何重构这些动态生成的输入？

Question

I am trying to use dynamically created inputs, and was wondering how I could make the code better.

The idea is to have a "configuration" object which determines the input generation.

I am interested in all suggestions, like better patterns, renaming variables/components/css-classes, moving code around, possible problems, inefficiencies...

My possible improvement is to move the input state inside the Inputs component, rather than the current Journal component. Not sure if it's a good idea...

Journal.js

import React, { useState, useEffect } from "react";
import Inputs from '../layout/Inputs';

function Journal(props) {

    const [inputsJournalItems, setInputsJournalItems] = useState({
        documentKey: "",
        documentDate: ""
    });

    // generic handler based on the input name
    const handleInputChange = e => {
        setInputsJournalItems({
            ...inputsJournalItems,
            [e.target.name]: e.target.value
        })
    }

    // log the state after re-render
    useEffect(() => {
        console.log(inputsJournalItems)
    }, [inputsJournalItems]);

    // how to avoid including the handler for each input?
    const inputs = [
        { type: "input", label: "Document", name: "documentKey", handleInputChange },
        { type: "input", label: "Date", name: "documentDate", handleInputChange },
        { type: "button", value: "Save", name: "save" },
    ];

    return (
        <div>
            <Inputs
                data={inputsJournalItems}
                inputs={inputs} />
        </div >
    )
}

export default Journal;

Inputs.js

import React from 'react';
import Input from '../layout/Input';

function Inputs(props) {
    return (
        <div className="inputs">
            {
                props.inputs.map(input => {
                    return (
                        <Input
                            type={input.type}
                            label={input.label}
                            name={input.name}
                            handleInputChange={input.handleInputChange}
                            value={input.value ? input.value : props.data[input.name]}
                        >
                        </Input>
                    )
                })
            }
        </div>
    )
}

export default Inputs;

Input.js

import React from 'react';

function Input(props) {
    let inputId = `input-${props.name}`;
    return (
        <div className="input-group">
            <label>{props.label}</label><br></br>
            <input
                type={props.type}
                id={inputId}
                name={props.name}
                onChange={props.handleInputChange}
                value={props.value}
            />
        </div>
    )
}

export default Input;

Answer 1

I have a few suggestions and a few modifications that may make things cleaner and maintainable for you:

you can check it out on codesandbox.io

or by running the snippet below

 <iframe src="https://codesandbox.io/embed/nervous-snow-sefyi?fontsize=14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="nervous-snow-sefyi" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin" ></iframe>

Demo Screenshot