score:1
Accepted answer
i corrected the code and now it works!
handlefromcert
inapp.js
should receivename
andvalue
;value2
in thepanel
component inapp.js
is passed with an error;handlefromcert
incertifications.js
setvalue
changes incorrectly.
certifications.js
import react, { usestate } from "react";
const certifications = (props) => {
const [value, setvalue] = usestate({
value1: "",
value2: ""
});
const handlefromcert = ({ target: { value, name } }) => {
setvalue(prevstate => ({ ...prevstate, [name]: value }));
props.handlefromcert(name, value);
};
return (
<div>
<input name="value1" onchange={handlefromcert} />
<input name="value2" onchange={handlefromcert} />
<div>
inside certificate
<div>{value.value1}</div>
<div>{value.value2}</div>
certificate ends
</div>
</div>
);
};
export default certifications;
app.js
import react, { usestate } from "react";
import certifications from "./certifications";
import panel from "./panel";
const app = () => {
const [value, setvalue] = usestate({
value1: "",
value2: ""
});
const handlefromcert = (name, value) =>
setvalue((prevstate) => ({ ...prevstate, [name]: value }));
return (
<div>
{value.value1}
{value.value2}
<certifications handlefromcert={handlefromcert} />
<panel value1={value.value1} value2={value.value2} />
</div>
);
};
export default app;
score:0
the problem is that you're not passing the event as the argument, you're passing the value and your function is expecting the event. in your certification component change this:
const handlefromcert = (e) => {
setvalue({
[e.target.name]: e.target.value
});
props.handlefromcert((e.target.name, e.target.value));
};
to this:
const handlefromcert = (e) => {
setvalue({
[e.target.name]: e.target.value
});
props.handlefromcert(e);
};
your function handlefromcert is expecting the event, and you're just passing the value which is a string and cannot be destructured like the event.
here's the sandbox working for me: https://codesandbox.io/s/zen-paper-gil-forked-r01fh
Source: stackoverflow.com
Related Query
- Wait for API call data before render react hooks
- Wait for API data before render react hooks
- Multiple fetch data axios with React Hooks - render data
- react hooks How to render data groupby
- Render data in React Hooks
- React Hooks : mapping data from api call to render pie chart
- React fetch data in server before render
- How to focus something on next render with React Hooks
- How to get the data from React Context Consumer outside the render
- Does a render happen before function in React Hooks useEffect is called?
- Testing React components that fetches data using Hooks
- React context with hooks prevent re render
- React Hooks render twice
- React Custom Hooks fetch data globally and share across components?
- Multiple fetch data axios with React Hooks
- React Hooks - How to avoid redeclaring functions on every render
- Update React Hooks State During Render Using useMemo
- React hooks error: Rendered more hooks than during the previous render
- Using react hooks inside render prop function
- Recursively render a deep nested data in React
- Passing Data from Child to Parents React Hooks
- React Recharts render blocking with a lot of data
- Laravel 5.5 render a React component in a blade view with data from the controller
- Render recursively a nested data in React
- How to perform a server side data fetching with React Hooks
- Using fetch to render json data in react app
- Multiple times render in react functional component with hooks
- Why is my React component render called twice, once without data and then later with data, but too late exception?
- React - this.state is null inside render when getting data from API
- How to load child component with props on first render with React Hooks
More Query from same tag
- TypeError: Cannot read property 'actualPersonAlbum' of undefined
- ReactJS fetch for each value of array
- ReactJS: Input onChange not Updating State
- Can't show image in my ReactJs application
- how to find error useTransition in react-spring?
- Using useEffect and useContext while fetching data
- GraphQL error: Expected type Int. Int cannot represent non-integer value
- Create-React-App failed to compile | Import/First Error
- How to update a reused variable using the same function without isolating it into another component?
- Put linebreak between components rendered with .map and boostrap
- Trying to generate alerts for invalid fetches for cities with OpenWeatherMaps API
- React 'this' undefined when adding table row
- Why Call React Hooks at the Top Level?
- Reading input value always returns undefined ReactJS
- × TypeError: Object(...) is not a function, while creating store using redux and firebase
- How to access class element variable in React/TypeScript
- TypeError: Cannot read property 'map' of undefined React Hooks
- difference between ClassicComponentClass and ComponentClass in reactJS
- React-Native Button Align Center
- Typescript interface extends React.FC
- reactjs MUI override style with parent reference
- React JS user enters value in the input field on button click to display the value
- Aws-Amplify: manifest.json and env.json loading index.html
- Flask and React - Handling tokens after Spotify Authorization
- Map function and inside filter function
- React Hooks - UseState - Passing object from Child to Parent
- How to fix jslint error 'Don't make functions within a loop.' while using find function inside loop
- How to pass props to child components in react-router tree
- Cypress can't find data-testid
- ReactDOM.render(Array, DivContext) only works once