score:1
Accepted answer
you can convert fragments
array into a function which takes onchanghandler
and return an array itself.
below is the refactored code, for simplicity i'm just logging the input element id and the value that's being inputted.
const { fragment } = react;
const fragments = (onchangehandler) =>
[
<input type="text" id="screen1_input1" onchange={onchangehandler} />,
<input type="text" id="screen2_input1" onchange={onchangehandler} />
];
const childcomponent = ({ index, fragments }) => {
const onchange = e => {
const { target: {id, value} } = e;
console.log(id, value);
};
return (
<fragment>
<h2 classname="screens">{fragments(onchange)[index]}</h2>
</fragment>
);
};
const parentcomponent = props => {
return <childcomponent index={1} fragments={fragments}/>;
};
reactdom.render(<parentcomponent />, document.getelementbyid("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="react"></div>
score:1
define fragments like this
const fragments = [
const screen1 = (onchangehandler) => {
return (
<>
<input type="text" id="screen1_input1" onchange={onchangehandler} />
</>
)
};
const screen2 = (onchangehandler) => {
return (
<>
<input type="text" id="screen2_input1" onchange={onchangehandler} />
</>
)
};
]
childcomponent.js
const childcomponent = (props) => {
let index = props.index
const fragments = props.fragments
const onchange = (e) => {
//whatever
}
return (
<>
<h2 classname="screens">
{fragments[index](onchange)}
</h2>
</>
)
}
Source: stackoverflow.com
Related Query
- How can I reference a function inside a component from the outside?
- How can I pass the argument up to the onClick function when it is called by reference inside return tag in reactjs?
- In React, how can a parent component set state from the response an async fetch function performed in a child component?
- React call from class to functional component. Error: Invalid hook call. Hooks can only be called inside of the body of a function component
- How to reference a React Component class from outside the render function?
- How do I change the component from inside a map function in react?
- How can I call a function that set sets an outside variable inside a custom component in React Native?
- How can I dispatch a state change to redux when calling it from a function inside the component?
- How can I pass the value from my function to another component in another file
- React component module (imported from local repo) causes error "Hooks can only be called inside of the body of a function component."
- How can I call the function of a parent component inside of a child component?
- how can i send an api call from the supreme function to another component called product to change a mock data called cart: true and display in cart
- react (class based) : How can I update JSON object in parent component using setState after the object being passed in function from child to parent?
- React - How can I make a component from a function inside a parent component?
- REACTJS: How can I call the setter inside a function from a function?
- How can i pass props from a functional button component to another function component that displays the prop?
- Invalid hook call. Hooks can only be called inside of the body of a function component
- React Hooks Error: Hooks can only be called inside the body of a function component
- React Warning: Cannot update a component from inside the function body of a different component
- React, how to access the DOM element in my render function from the same component
- Invalid hook call. Hooks can only be called inside of the body of a function component when apply style to class base component with material-ui
- How to fetch API data from Axios inside the getServerSideProps function in NextJS?
- How can I call methods on Reactjs components in the browser console or from an outside script?
- react-router-dom: Invalid hook call, Hooks can only be called inside of the body of a function component
- BrowserRouter causing Invalid hook call. Hooks can only be called inside of the body of a function component
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- Invariant Violation: Hooks can only be called inside the body of a function component
- How to call a component function on other component, but from the other component ? React
- How to distinguish what caused rendering of React component: something from the inside or from the outside of the component?
- React + Antd + Rollup Component Library "Error: Invalid hook call. Hooks can only be called inside of the body of a function component"
More Query from same tag
- React: missing script: start
- Child component is not updating parent's state in React.js functional component
- Css canĀ“t find tailwind
- Add items to list in ReactJS
- How to convert 'Functional Componenet' to 'Class Component' in React in Material-UI
- CRUD op Express.js Node.js Mysql Cannot insert using MVC
- JSON from api not being displayed on ReactJS render method
- api.get(...).then(...).catch(...).finally is not a function
- React Router: wildcard matching matches other routes with query parameters
- Change values of an object
- How do i remove white spaces between borders in table
- Object as input variable in mutation: GraphQL - Apollo - React
- How to know deep inside component hierarchy we have a special component, efficiently?
- How to navigate to pages from parent component to child with dynamic header and back?
- How to disable the menu button option in DataGrid MUI?
- Download file stored in S3 bucket directly to React client, instead of passing through Node.js server
- React setState updates props
- How to correctly build a package so that suggestions/autocomplete work in intellij when this private styleguidist packages is used in another project
- FloatField vs DecimalField in Django and JS/React
- redux-form: trigger Form onSubmit after Input onChange
- How to update(add and remove) items in redux nested list : Redux, React
- Toggle Drawer from AppBar LeftIcon
- How not to treat warnings as errors with Travis for React
- async fetch triggered three times
- How to fix Module not found: Can't resolve '@heroicons/react/solid' in react app?
- React dynamic component list not updating correctly
- What's wrong with setting defaultChecked via getCheckboxProps in ant design table selection?
- Updating a state array
- how to close the menu when clicked
- Changing Background Component - REACTJS