We Keep Coding

zod validation for an array of objects

I am trying to add validation for a form that has a checkbox selection with a number input next to each checkbox. A user selects a profession checkbox and then enters the number of years of experience they have in the input next to it. The array looks like this (experience has a default of 1):
const fieldsOfEng = [
{
id: "ELECTRICAL",
name: "Electrical",
experience: 1,
},
{
id: "MECHANICAL",
name: "Mechanical",
experience: 1,
}
]
This is how the schema would look if I was just verifying that the user selected one of the options in my professions array
export const userInfoSchema = z.object({
professions: z
.string()
.array()
.refine((val) => val.some(profession =>
fieldsOfEng
.map((field) => field.name)
.includes(profession)))
})
with the input being registered via react-hook-form like:
{fieldsOfEng.map((field) => {
return (
<input
{...register("professions")}
value={field.name}
type="checkbox"
/>
)}
--------------------WHAT I WANT:
I'd like to add an 'experience' field to my schema so I it would look something like (but this isn't correct):
professions: z
.array(
z.object({
name: z.string(),
experience: z.number(),
})
)
.refine(({name}) =>
name.some(({ profession }) =>
fieldsOfEng.map((field) => field.name).includes(profession)
)
)
.refine(({ experience }) => {
experience.some((exp) => exp > 1);
}),
And I think my form would look something like:
{fieldsOfEng.map((field) => {
return (
<input
{...register("professions.name")}
value={field.name}
type="checkbox"
/>
<input
{...register("professions.experience")}
value={field.experience}
type="number"
/>
)}
I can always experiment with the form but my main concern is the schema.

This answer is an update on my progress so far. I closer to getting my schema validation working correctly but for some reason it is not submitting. I could solve this faster if I could get react-hook form's errors to output correctly but since I'm using template literals when I'm registering the inputs, the error is just outputting nothing. I DO know there is an error though because my truthy error outputs the "professions:" string that I added in the p-tag.
Data for checkboxes in form (this is the data I'm validating via zod):
const fieldsOfEng = [
{
id: "ELECTRICAL",
name: "Electrical",
experience: undefined,
},
{
id: "MECHANICAL",
name: "Mechanical",
experience: undefined,
},
Schema for validation: I'm checking that the name they select is included in my fieldsOfEng array and making sure the experience is greater than 1.
const userInfoSchema = object({
professions: z
.object({
name: z
.string()
.refine((name) =>
fieldsOfEng.map((field) => field.name).includes(name)
),
experience: z.number().refine((experience) => experience > 1),
})
.array(),
});
React hook form:
type userInfoType = z.infer<typeof userInfoSchema>;
const {
register,
watch,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<userInfoType>({
resolver: zodResolver(userInfoSchema),
});
Form: Notice I am using template literals for registering each input. It took me forever to figure this out. So far this is the only way I've been able to get the data to output correctly (via react-hook-form's 'watch' method).
<fieldset>
<legend>Practicing fields of engineering</legend>
{fieldsOfEng.map((field, i) => {
return (
<div key={field.id}>
<div>
<input
{...register(`professions.${i}.name`)} <--REGISTERED HERE
value={field.name}
type="checkbox"
/>
<div>
<input
{...register(`professions.${i}.experience`)} <--REGISTERED HERE
type="number"
value={field.experience}
placeholder="Yrs Experience"
/>
</div>
</div>
<div>
{errors.professions && (
<p>
professions:
{errors.professions.message}
</p>
)}
</div>
</div>
);
})}
</fieldset>

How to put the admin user always at the top of the table?

I made a table using .map() returning users from an array that has only one admin user.
I know the user is admin because it renders name (ADM) as follows:
I'm fetching the user.email from the users array and comparing it with the user.email from the context (it takes the data that is coming from auth0). If this email has the admin permission (manage:accounts), then its name will be followed by (ADM). I think this code can help to make the .sort(), but I couldn't do it
Here is the array : The email michelle#gmail.com is the one with admin permission on auth0
const userList = [
{
name: 'Bob', email: 'bob#gmail.com', birth_date: '13/03/1954'
},
{
name: 'Susy', email: 'suzy#gmail.com', birth_date: '23/03/1987'
},
{
name: 'Michelle', email: 'michelle#gmail.com', birth_date: '31/10/1992'
}
];
Here is the code I just described:
{user.name} {user.email === context.user.email && context.user.permissions.includes('manage:accounts') && ('(ADM)')}
Here is the table I did:
<TableContainer component={Paper} elevation={0}>
<S.TableContent>
{userList?.length && userList.map((user, index) => (
<TableRow key={index}>
<S.TableCellIcon>
<S.UserIcon src={'/icon_profile.svg'} alt='Ícone do perfil' />
</S.TableCellIcon>
<S.TableCellUser>
<span>{user.name} {user.email === context.user.email && context.user.permissions.includes('manage:accounts') && ('(ADM)')}</span>
<p>{user.email}</p>
</S.TableCellUser>
<S.TableCellLastAcess>
Último acesso: <b>{user.birth_date}</b>
</S.TableCellLastAcess>
</TableRow>
))}
</S.TableContent>
</TableContainer>
Thank you for your help <3

Count number of Children in recursive react component

I'm working on a comment system and used a recursive approach to show parent and child comments. When I delete a child, I want to update the count of child comments for its parent.
//json data
data = [{
name: 'Parent1',
childComments: [{
name: 'Child1',
text:'child comment1'
},
{
name: 'Child2',
text:'child comment2'
}]
},{
name: 'Parent2',
childComments: [{
name: 'Child1',
text:'child comment1'
},
{
name: 'Child2',
text:'child comment2'
}]
}]
const Comment = ({ item }) => {
const childComment = item
//delete child element and update the parent count
const deleteChildComment =(item) => {
}
return childComment && (
<>
{name}
Children count : {childComments.length}
<Button
className={styles.replies}
onClick={() => {
setNewCommentAdded(false)
deleteChildComment(childComment)
}}
> Delete This comment </Button>
{childComments && items.map((item) => (
<Comment item={item} />
))}
</>
)
}

Counting the children would be a bad idea and make things way too complicated.
Just use the data you use to generate the comment component.
As a rule, always make a UI represent data. Don't try to derive data from your UI layout.
e.g
commentList.map((comment) => (<Comment childCount={comment.children.length}));

React.js how to send array to react router

I have an array like this :
const types = [
{
name: 'Catalog A',
slug: 'catalog-a'
},
{
name: 'Catalog B',
slug: 'catalog-b'
},
{
name: 'Catalog C',
slug: 'catalog-c'
},
{
name: 'Catalog D',
slug: 'catalog-d'
},
]
this array is mapped and made into buttons or Links for react-router... the Links works, but not my problem is that I want to pass these array to the components that have no connection from the above components.
here is the mapped button :
{types.map(type => (
<ButtonToggle
key={type}
active={active === type}
onClick={() => setActive(type)}
show={parseFloat(show)}
>
<Link to={type.slug} >
{type.name}
<p>
Unpublished
</p>
</Link>
</ButtonToggle>
))}
here is what I have in mind for mapping the route :
{types.map(type => (
<Route
path={type.slug}
>
<h1>{type.name}</h1>
</Route>
))}
but now types array must be sent to the above code/components...
I am done with the array, I just make a separate file for it, but i the active state is not done yet.
active={active === type}

You can try this way:
<Link to={{ pathname: type.slug, state: someData }} >
then in your next location (type.slug I suppose) you should have access like this:
this.props.location.state

showing only first element from data

Hi all I have following code: my code
In this scenario I am receiving some data from backend
const attachments = [
{
id: 1,
name: "someURLL_Name_1",
link: "https://someURLL_Name_1",
img: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
},
{
id: 2,
name: "someURLL_Name_2",
link: "https://someURLL_Name_2",
img: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
},
{
id: 3,
name: "someURL_Name_3",
link: "https://someURLL_Name_3",
img: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
}
];
I need to map them all and show only first element form my data, and show with numbers rest hided data.
In the end it should be like something like this:
someURL_Name_1 https://someURLL_Name_1 +2 more
I successfully mapped all my data and write little logic for + more.
<div className={Styles.attachments}>
{data.map((item) => {
return <Attachment key={item.id} data={item} image={item.img} />;
})}
{data.length > 1 && (
<span className={Styles.more}>+{data.length - 1} more</span>
)}
</div>
Please help me to resolve a problem. Again, I want to show only first element , and then if there are another elements then I should hide them and show hide elements with numbers.
Thanks.

Just don't map over all entries then. The following will work :-
export const Attachments = ({ data }) => {
return (
<div className={Styles.attachments}>
{data[0] && (
<Attachment key={data[0].id} data={data[0]} image={data[0].img} />
)}
{data.length > 1 && (
<span className={Styles.more}>+{data.length - 1} more</span>
)}
</div>
);
};