How to Pass Props, parameter and Functions to Child Components
This Articles Explain you, How to Pass Props, parameter and Functions to Child Components
In ReactJs, components allow you to break up the user interface into separate, reusable chunks of code.
Similar to JavaScript functions, components are. They take unrestricted inputs, or "props," and return React elements that describe what should be displayed on the screen.
Parent Component
interface Props {
property: Property;
}
export default function DealSectionPropertyFormListItem({property}: Props) {
const [user, setUser] = useState("");
const setUser= (id: string): void => {
setUser(id);
}
return (
<>
<ChildComponent
name={property.name}
handleruser={setUser} />
</>
)}
Child Component
interface Props {
name: string;
handleruser: (id:string) => void;
}
export default observer(function DealSectionPropertySpartaUser({ name, handleruser}: Props) {
const { userProfileStore } = useStore();
const { loadProfiles, UserProfiles} = userProfileStore;
const handleOnChange = (e: any) => {
handleruser(e.target.value);
};
useEffect(() => {
loadProfiles();
}, [loadProfiles]);
return (
<select
name={name}
id={name}
onChange={handleOnChange }
>
{UserProfiles.map((user, i) => <option value={user.id} key={user.displayname}>
{user.displayname}</option>)}
</select>
);
});
This way, we can pass whatever value selected in Child Component back to its Parent Component, Where Parent can save the same in database.
