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