jeudi 8 septembre 2022

Sending parameters to a Form within a High Order Component in React

I want to adjust a demo provided by some tutorial about React Design Patterns, subject: Higher Order Component. In this example the url and parameters are hardcoded inside of the component and it works on my side. But how can I send the url (here: /users/123) to the form as argument when I invoke it?

Any help, tips, additional sources to learn this would be highly appreciated.

Here's my code for the Component, using the HOC:

    import { withEditableResource } from "./withEditableResource";
    
    export const UserInfoForm = withEditableResource(({ user, onChangeUser, onSaveUser, onResetUser }) => {
        const { name, age, hairColor } = user || {};
    
        return user ? (
            <>
            <label>
                Name:
                <input value={name} onChange={e => onChangeUser({ name: e.target.value })} />
            </label>
            <label>
                Age:
                <input type="number" value={age} onChange={e => onChangeUser({ age: Number(e.target.value) })} />
            </label>
            <label>
                Hair Color:
                <input value={hairColor} onChange={e => onChangeUser({ hairColor: e.target.value })} />
            </label>
            <button onClick={onResetUser}>Reset</button>
            <button onClick={onSaveUser}>Save Changes</button>
            </>
        ) : <p>Loading...</p>;
    }, 
'/users/123', 
'user');

Aucun commentaire:

Enregistrer un commentaire