score:3
Accepted answer
this.state.list_check.map((item, i) => {
const NecessaryButton = item ? SelectedButton : Button;
return <NecessaryButton onClick={() => this.makeSelected(i)}>Normal Button</NecessaryButton>
})
score:1
const Button = styled.div`
styleName: ${props => props.isSelected ? 'styling_if_Selected' : 'styling_if_not_selected'};
`;
score:1
render(){
<Wrapper>
{list.map((i) => {
return (this.state.isSelected
? <Button id={i} onClick = {this.customFunc.bind(this, i)} />
: <Button_Selected id={i} onClick = {this.customFunc.bind(this, i)} />)
}
</Wrapper>
}
Source: stackoverflow.com
Related Query
- Dynamically change styled component based on state AND index
- Dynamically add classes on based on state value and also change the children content based on parent's state change
- How to change className based on state and re render it in a functional component
- How to make a react class component retain its state after login and change available routes based on the state currently available in the component?
- how to rerender a component when hash change and change the state
- Can we pass setState as props from one component to other and change parent state from child component in React?
- how and when to call a react component methods after state change from redux
- Generate RTL CSS file in create-react-app and switch between them based on change in state
- Change state dynamically based on the external Internet connectivity - React (offline/online)
- how to change image src using props with styled component and react
- re-render single child component based on global state change without re-rendering siblings
- Dynamically render react component based on parent state
- how to change the antd carousel dot shape and color with styled component
- How to get index of clicked dynamically added Component in React and remove it?
- How to style a component based on state in Styled Components?
- Change React component visibility based on the state of another component
- Dynamically creating a new component based off another component's state
- Component does not render based on state change in react-redux
- Prevent child component from rerendering based on change of state in parent
- How to animate a conditionally rendered part of the component on state change using javascript and css?
- ag-grid (react) change rowStyle dynamically based on state
- How to Change a css property based on a state of another component
- How can I test if child React component was rendered based on a URL change using Jest and Enzyme
- Updating React Component state Dynamically based on server state
- How to setState() dynamically in between Parent and Child Component [Logic being run on child & state on the Root App level]
- Change state from dynamically created child component - React
- ReactJS - How to change a component's state based on another component
- showing a different component on state change and for loop React js
- How can I show dynamically a component based on the value of the state
- Sibling component not re-rerendering on state change (using useEffect, useState and Context)
More Query from same tag
- PropTypes for NextJS Image Component
- Get current route for react-router
- Return clients a response with their data they provided. Like an AutoResponse coming from a database MERN project
- Mapping through an array of dictionary and then passing values as props in the component
- SignalR in ReactJS - work with the same hubConnection within different components
- how does cb && 'function' === typeof cb && cb(data) work in the Action(React-redux) with redux-thunk?
- How to get data from API based on other values types
- ERROR: Firebase Database (${JSCORE_VERSION}) INTERNAL ASSERT FAILED: Reference.ts has not been loaded
- React.js variable
- React js How to get Value within a useEffect and display on defualtValue textfield
- Applying Animation to React Component while using Styled Components
- trying to get config from backend to react front-end
- React Hook "useEffect" is called in function "shoes" which is neither a React function component or a custom React Hook
- Not to able to get `props` in react js - next js app
- Accessing this.state in React-Native
- How to pass user back to front end client after authorizing and obtaining access token?
- How to add async script to React
- How to override the label styles in MUI's Chip
- Compare states from child components in react
- How to merge passing prop and default prop in react?
- Need to Detect a Click inside Complex Component and return the Component ID
- How do I stop my React application from continuously updating an element based on an input field?
- Running a react app in docker : react app in docker fails to run
- add JSON body to axios instance
- Can't get a proxy server working on react app for local mysql database
- react: how to set focus from a click handler
- React Troubles when trying to update states from props
- How do I add text over my image slider and make it different for each image?
- How to set the selected index of a dropdown in reactjs?
- React Redirect not rendering Component