We Keep Coding

React From Group input field is not working

I attached dropdown items to my form group input field (image below). When I add onChange() key in order to get its value, I cannot write anything to input field. But when I remove onChange() key, it is working, I am able to write anything, but I need to get the value of input field. Is there any other way than onChange() key or any solution? Thank you in advance :)
Here is the my code:
<Form.Control
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
size="sm"
type="text"
className="search-or-jump shadow-none"
placeholder="Search or jump to..."
onChange={event => setSearchName(event.target.value)}
/>
{children}
</Form.Group>

You have to add value attributes, like
<Form.Control
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
size="sm"
type="text"
className="search-or-jump shadow-none"
placeholder="Search or jump to..."
value={searchName}
onChange={event => setSearchName(event.target.value)}
/>
{children}
</Form.Group>
Your code didn't have value attribule but you called 'value' on 'onChange' that why your code didn't work.

Access input name attribute using template literals (React)

I'm having some problem to use errors (object provided by React Hook Form) to show a validation message (when a required input field is empty) for the input fields.
{
inputs.map((name) => (
<div key={name}>
<div style={{ marginTop: "3px" }}>
<input
name={`Chamfer Set.${name}`}
ref={register({ required: true })}
/>
</div>
{errors[`Chamfer Set.${name}`] && (
<span>Please enter a value for {name}.</span>
)}
</div>
));
}
Basically I have to link errors to the input name attribute, which in this case I'm using template literals. But it is not working and I guess it is something related to the literals, but I'm not very into it. Do you guys have any idea?
If I use console.log(errors), I have the following structure:

To access the error property just replace:
errors[`Chamfer Set.${name}`]
By:
errors["Chamfer Set"] && errors["Chamfer Set"][`${name}`]

As #Micheal mentioned, Try
{
inputs.map((name) => (
<div key={name}>
<div style={{ marginTop: "3px" }}>
<input
name={`Chamfer Set.${name}`}
ref={register({ required: true })}
/>
</div>
{errors[`Chamfer Set`][`${name}`] && (
<span>Please enter a value for {name}.</span>
)}
</div>
));
}

Form.Provider does not work properly saving data

I use in my react application Form.Provider from Ant Design library.I use it, because i generate inner forms inside main form. My target is, when i will click on SUBMIT button, to output in the same time data from outer form and from inner forms. The number of inner forms depend by user, so he can generate as many he wants.
My outer form:
<Form.Provider
onFormFinish={(name, { values, forms }) => {
console.log(forms);
if (name === "inner") {
const { inner } = forms;
const innerF = inner.getFieldValue("first") || [];
console.log(innerF);
}
}}
>
<Form name="outter" onFinish={onFinish}>
{nr.map(i => (
<div>
<p key={i}>{i}</p>
<Inner nr={i} />
</div>
))}
<Form.Item name="nr" label="Nr">
<InputNumber min={1} max={5} onChange={handleInputChange} />;
</Form.Item>
<Form.Item>
<Button htmlType="submit" type="primary">
Submit
</Button>
</Form.Item>
</Form>
</Form.Provider>
And my inner form
<Form name="inner" onFinish={onFinish} autoComplete="off">
<Form.List name="users">
{(fields, { add, remove }) => {
return (
<div>
{fields.map(field => (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
<Form.Item
{...field}
name={[field.name, "first"]}
fieldKey={[field.fieldKey, "first"]}
rules={[{ required: true, message: "Missing first name" }]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, "last"]}
fieldKey={[field.fieldKey, "last"]}
rules={[{ required: true, message: "Missing last name" }]}
>
<Input placeholder="Last Name" />
</Form.Item>
<MinusCircleOutlined
onClick={() => {
remove(field.name);
}}
/>
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
>
<PlusOutlined /> Add field
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
<Form.Item>
<Button ref={myRef} type="primary" htmlType="submit">
-
</Button>
</Form.Item>
</Form>
I added Form.Provider in outer form but i can't figure out how to get all values from inner form and from outer form in the same thime, clicking on SUBMIT button.
Demo: https://codesandbox.io/s/mutable-tree-5c1y1?file=/Outer.js:485-1291
Question: Why Form.Provider does not work and how to output all data, from inner, and from outer form, clicking on the SUBMIT button?

From what I can understand after reading a little bit of the documentation of Ant Design, in order for the outer onFinish to run, one of the forms need to submit. This can either be achieved by holding the reference of the form from the outer component and calling submit(), or declaring the button as a children of the Form.Item. In the second case, you would get a button after every form. Which is something you don't want. I would say go for the solution I have provided in here after the "Edit" part.

react hook form, A component is changing a controlled input of type hidden to be uncontrolled

i have a problem with use onChange method inside a Controller tag from react-hook-form. I need capture when the user select a field to render a new one downside, with information relationship in the last one.
Im using react-hook-form with MUI
<FormControl>
<InputLabel>Universidad</InputLabel>
<Controller
as={
<Select placeholder="Universidad">
{universities.map((item, i) => {
return (
<MenuItem value={item.value} key={i}>
{item.label}
</MenuItem>
);
})}
</Select>
}
name="university"
control={control}
onChange={([event]) => {
console.log(event.target.value);
}}
defaultValue=""
/>
</FormControl>

why label is display inside select box?

why my select box label display inside the select box .Take a example i am not using react -material-validator .it show like this
https://codesandbox.io/s/5vr4xp8854
when i tried to validate my select box using react-material-ui-form-validator plugin my label come inside the select bx why
here is my code
plugin:
https://www.npmjs.com/package/react-material-ui-form-validator
https://codesandbox.io/s/38x8q8zpm5
Secondly when I submit my label is not display in red color why ?
function App() {
return (
<div className="App">
<ValidatorForm onSubmit={() => {}} className="" autoComplete="off">
<FormControl>
<InputLabel shrink={true} htmlFor="age-simple">
Age
</InputLabel>
<SelectValidator
required
value=""
name="name"
displayEmpty
validators={["required"]}
errorMessages={["this field is required", "email is not valid"]}
inputProps={{
name: "age",
id: "age-simple",
shrink:true
}}
SelectProps={{
displayEmpty: true,
shrink:true
}}
input={<Input id="age-simple" />}
className=""
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</SelectValidator>
</FormControl>
<Button type="submit"> submit</Button>
</ValidatorForm>
</div>
);
}

Looks like Material UI FormValidator package simply takes a label property. You should remove
<InputLabel htmlFor="age-simple">
Age
</InputLabel>
and add the label and InputLabelProps with shrink: true (as discussed in the limitations Here ) properties for your SelectValidator, for example:
<SelectValidator
required
label="Age"
InputLabelProps={{ shrink: true }}
value=""
name="name"
.......
This will also fix your label not appearing in red when the user hits submit without a selection.