score:0
Accepted answer
i basically passed item.checked
as item
to my editor
component and used it like so
...
render() {
const {item, value, onedit, onvalueclick, isediting, oncheck, ...props} = this.props
...
then in my editor.jsx i did the following
/components/editor.jsx
rendervalue = () => {
const ondelete = this.props.ondelete
const oncheck = this.props.oncheck
const itemchecked = this.props.item
const ischecked = {textdecoration: itemchecked ? 'line-through' : 'none'}
return (
<div>
{oncheck ? this.rendercheckitem() : null}
<div onclick={this.props.onvalueclick}>
<span style={ischecked} classname='value'>{this.props.value}</span>
{ondelete && this.renderdelete()}
</div>
</div>
)
}
rendercheckitem = () => {
return (
<input
type="checkbox"
classname='check-item'
defaultchecked={false}
onclick={this.props.oncheck}
/>
)
}
/components/items.jsx
export default class items extends react.component {
render () {
...
return (
<ul classname='items'>{items.map((item) =>
<item
classname='item'
key={item.id}
id={item.id}>
<editor
item={item.checked}
isediting={item.isediting}
...
score:1
you need to connect your components to the redux store. here's how to do it. in short you need something like:
export default connect(
state => {
return {items: state.items};
}
)(items);
where connect
comes from react-redux.
Source: stackoverflow.com
Related Query
- React Redux add line-through on checkbox click
- React Material-UI How can I add a checkbox which is separate from table row click
- On button click check the checkbox and add the data into cart in react redux?
- How can I add a checkbox to each element in the list and to be able to control it through state in my react app?
- When should I add Redux to a React app?
- React Router BrowserRouter leads to "404 Not Found - nginx " error when going to subpage directly without through a home-page click
- How to add strike through on Text in react native?
- How can I add a click handler to BODY from within a React component?
- How to add protected routes in react redux
- How to add click event with React createElement
- React checkbox get (un)checked after the second click
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- How to add login authentication and session to ReactJS React Router and Redux with MongoDB + NodeJS Express?
- React checkbox if checked add value to array
- How to add a CSS class to an element on click - React
- What is the correct way to add additional middleware through a redux store enhancer?
- Add and Remove HTML Elements on Button Click in React
- React + Redux App: Calling API through a Redux action Vs Calling an API directly
- Add class on focus change using Redux and React
- React with Material-ui card media, add overlay on click
- How to add a tab dynamically when we click a button using React js and Bootsrap 4
- How to add custom checkbox in column in react material table?
- How to add refresh token function in react js redux
- Idiomatic way to dispatch an action on a subcomponent in react redux without passing in props all the way through
- React add and remove a component on button click
- React redux Form checkbox `defaultChecked` not working
- How to add Click Handler through reference of component
- React Update Fetch on Checkbox Click
- How should I add Redux to a React project created with Create-React-App?
- React redux passing event handler through connect & mapDispatchToProps vs. rendering child with props
More Query from same tag
- How to await multiple async await requests in React
- How to set the nuxt assets url after build
- React router will keep its state data even after a browser refresh
- How can I create a web service endpoint for a locally served JSON file
- How to set the reference to the 'leafletElement' using Typescript inside react-leaflet?
- Problem in rendering sub menu For a infiinit drop down menu in React JS
- Is it possible to change default fallback message i18n-js?
- Flex box 3 column layout with sticky footer
- State changes from parent to children not reflected to TextField in React Hook
- How can I put border styling with react-stripe-elements input component?
- React Semantic UI Table Cell Does not Respond to onClick
- <Outlet /> fails to rerender with react router v6
- React-Toggle side menu className
- TypeError: Cannot call a class as a function (React/Redux)
- Drawer needs to be showed / hidden by children, to Redux or not to Redux?
- useEffect not triggering but the template is being rendered somehow
- React: Update field values dynamically from separate input states
- Open new page when clicking on a custom react component
- JavaScript click event handler not fired in the code below
- How to fix moment.js in reactjs?
- how to setup react-i18n with hooks, getting TypeError: Cannot read property '0' of undefined
- material-ui Button color won't change through css styling
- React Redux - Can't pass the string via dispatch action
- withFormik, pass function as props
- Slick Carousel Error
- When fetching data, how do we decide when we should use async api call based on content type
- how do i make an object pass as a child
- React.js and JSON: Dynamic Styles?
- Fetch API Response Code Differs from Network Tab Response Code
- how to show selected item in react js?