score:2
Accepted answer
if your components are really similar,you can create one single component
which does some actions and renders some result based on props.
just pass some props. and inside of your component, do your actions like you do in those 3 component separately. here, i tried to demonstrate how to use props to render different results from same component:
class mixedcomponent extends react.component {
constructor(props) {
super(props)
this.state = {type: ''}
}
componentdidmount() {
if (this.props.prop1) // if prop1 exists
this.setstate({type: 'do something'})
else
this.setstate({type: 'something else'})
}
render() {
let result;
if (this.props.prop1) {
result = (
<div>
render this component based on <strong>{this.props.prop1}</strong>
<p>type -> {this.state.type}</p>
</div>
)
} else if (this.props.prop2) {
result = (
<div>
render this component based on <strong>{this.props.prop2}</strong>
<p>type -> {this.state.type}</p>
</div>
)
}
else if (this.props.prop3) {
result = (
<div>
render this component based on <strong>{this.props.prop3}</strong>
<p>type -> {this.state.type}</p>
</div>
)
}
return result
}
}
and use this component with different props in your main component:
class main extends react.component {
render() {
return (
<div>
<h4>render different results based on props with same component!</h4>
<hr/>
<mixedcomponent prop1="hello,"/>
<mixedcomponent prop2="dear"/>
<mixedcomponent prop3="world!"/>
</div>
)
}
}
this is just a demonstration of using props. you can derive the idea from here. here is a working example on codepen
:
https://codepen.io/anon/pen/dreqzk?editors=1010
you can play with it.
Source: stackoverflow.com
Related Query
- Dynamic requires in React
- React / JSX Dynamic Component Name
- Dynamic tag name in React JSX
- Can I make dynamic styles in React Native?
- How to create dynamic href in react render function?
- React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid
- React Native: require() with Dynamic String?
- Using Dynamic Var with `Set` State in React Hooks?
- Dynamic href tag React in JSX
- Advantages of dynamic vs static routing in React
- The react-scripts package provided by Create React App requires a dependency:
- Dynamic loading of react components
- How to Implement dynamic routing in routes.js for generated menu items in sidebar in universal react redux boilerplate by erikras
- Typing a dynamic tag in React with TypeScript?
- Dynamic Opacity not changing when component rerenders in react native
- Dynamic breadcrumbs using react router
- deployed react web app requires hard refresh
- Create React App requires a dependency: "babel-loader": "8.1.0"
- dynamic HTML String to react component
- React props: Using an HTML entity within JSX dynamic content?
- Dynamic tabIndex attribute in JSX + React
- React table dynamic page size but with size limit and pagination
- react setState with dynamic key
- How to clear input values of dynamic form in react
- React Native "The expo SDK requires Expo to run. .... this code is not running on Expo."
- Get state value by a dynamic key in react
- React Native requires two taps to change input focus when within scrollview
- Set dynamic key in state via useState React hooks
- React PropType check dynamic object
- Dynamic import in react not working when trying to import a component in another directory
More Query from same tag
- ReactNative & Expo: Trouble incrementing/decrementing to cycle through an Array
- TS1128: Declaration or statement expected (end of file)
- How unperformant are anonymous functions in React component attributes?
- Error when trying to import data with Marak/faker.js
- Highcharts-React Get Base64 PNG of chart
- How to pass props inside of Router while using React Context
- How do I sort a integer column ascending and descending?
- React-leaflet not rendering map properly in Ionic
- React Js API call Unit Test Case
- How to render different view when onClick button in ReactJS?
- Material-UI Button and ButtonGroup do not align on the baseline
- How to split dynamically by directories with Webpack/SplitChunks plugin?
- Async function into useEffect fetches data after componet rendering
- How can I pass data to a separate component which is loaded by a redirect?
- How to set max value for LinearProgress in material ui?
- How to run 2 instances of ReactI18Next on the same app?
- Serve Django views with React?
- Node.js internal 500 server error "cannot read id of undefined"
- How to fix a single selection in antd select
- Re-rendering react component after clicking Like button (with Redux)
- How to make setState synchronous in React after axios response
- I keep getting [object Object]. when I try to get data from the map function
- Wait until onSnapshot data is fetched Firestore Firebase Next JS
- Styling/ Changing Autocomplete close Icon in Material UI React
- Access attribute value from another attribute in React
- Promise.all in Redux action and update state
- How to fill 100% of height and width of Ant Card?
- Import react-bootstrap in sass
- You may have returned undefined, an array or some other invalid object
- Search functionality and fetch api in React