score:0
ok pennie, for building a dynamic options (if i understood what you are tring to develop here).
i think you should pass the options as props into the nestedfieldsarray.js,
fieldsarray.js->
<nestedarraynestindex={index}
{...{ control, register, options }}
/>
and in the nestedfieldsarray.js->
const nestedarray = ({ nestindex, control, register, options }) => {
const { fields, remove, append } = usefieldarray({
control,
name: `order[${nestindex}].variation`
});
and remove the hard coded options-
const options = [ //should be delete
{ label: "red", value: "red" },
{ label: "green", value: "green" },
{ label: "blue", value: "blue" }
];
score:2
i did not dig in to see how react-hook-form
works, so you can probably come up with a nicer solution.
here is my solution in codesandbox: https://codesandbox.io/s/react-hook-form-wizard-form-from-reddit-with-data-setting-up-a-setproduct-forked-wyo8i2?file=/src/index.js
to describe the changes i made:
- i added a state variable in
fieldarray
to hold the currently selected product. (you probably incorporate this better using your form library). the value is then passed tonestedarray
. - edited the rendered
<autocomplete>
props infieldarray
to includeonchange
instead ofoninputchange
(used onchange instead of oninputchange to get the product object instead of the generated label as an argument to the function).
i aslo had to map the colors of the product object to an array similar to the one you had created.
const options = object.keys(product.colormap).map((color) => ({
label: color,
value: color
}))
Source: stackoverflow.com
Related Query
- how to pass the data from child component to parent component
- How pass data from the child component (the child has its own state) to the parent?
- How to pass data from child component to parent component without the child component rerendering in React?
- React: How to pass the data from function located on the child component into parent component?
- How do I use react context API to pass data from parent component to child component when using react-router in the parent component in React.js?
- How do I pass my Form Data which is in the child component to the parent component(which also contains a form) and on submit log all the data?
- ReactJS - How to pass data from child to parent component & parent to child component on the same event?
- How to pass data from child component to its parent in ReactJS?
- How do i pass data up from a child web component to it's direct parent element
- How to pass props (both states and functions) to the child router component
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- How do I get the Age data from child to parent component
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- React router dom passing data from parent component to child router component does not pass the props.match
- How to pass updated state to a child component on rendering of the page?
- How to pass a state to a Parent component if I have a button triggering the state in the 2nd Child in React
- How do I pass a prop to a react component yet not update that prop in the child when parent changes?
- Need Reactjs help on how to properly pass this function from the parent to child button component
- How to reload the Data of a child when a child Component is being rendered in ReactJs
- How to pass data from a child component to a parent component in React.js
- how to pass a child component's validated data (as a formik form) to its parent component and handle form submission in parent
- How to pass data from child component to parent component in reactjs
- How to pass data from parent to child component in reactjs?
- How to handle the props from Parent Component to child component to populate props data in the form for updation
- In React How to pass object using history.push from a component to child component and read data
- React: How can you pass all the state at once to the child component with Hooks?
- How to pass a state from the child to app component
- How to pass data from parent component to child after creation of child?
- How to pass info from a child component to a function in the parent component? (REACT NATIVE)
- How do you pass an image from the root component to a child component using state variables in React?
More Query from same tag
- How to Programmatically Assign and Get Refs in React
- React Router doesnot match path = "/" in production
- Getting ENOENT error when running "npm start" for React apps
- what happens to http request when route changes in SPA
- Mern, Deleting comments issue
- In React (not react native): The behavior for Date objects stored in Firestore is going to change AND YOUR APP MAY BREAK
- How can I use Typed package in React?
- React index.html rendered but react component does not
- I am not receiving all the data in the req on JWT renew function
- Position a marker direction in react-leaflet facing a [long, lat]
- Prevent useState value from being reset when props change
- Need help on "setState"
- reactJS drop-down menu in table, duplicating itself
- ReactJS - "react-google-maps": after clicking on a marker, no InfoWindow is displayed
- Rendering HTMLDivElements in ReactJS
- Importing css file in jsx using relative path
- Why 'this' is undefined inside a Promise call
- How to do event.stopPropagation() to react-select input field when arrow keys and enter key pressed in ag grid custom cell editor
- How to clear entries of TextFields and set them to default with the click of a button?
- React read input values from multiple input text fields
- Render new react component based on API fetch
- Webpack extreme slow build
- Can't await promise in map method
- styled-components with Typescript throws me unknow errors when passing props
- Import SVG in TypeScript React app with Webpack
- reactjs improving my code for calling childNode
- Server not sending correct response to frontend?
- Search form render
- ReactJS - State object property is null after setState
- Dynamically load React component library from URL?