Render a component from another class using function
Render a component from another class using function
So, I have a class like this:
I have another class written on top of this: And I am Passing this by: I have tried returning components but I am not getting anywhere. I can use ternary operator but it still will render only one of two but I have three component have three design for each of them. I want to render one of them to render on some condition as stated above. If I use states that for toggle that will too have two components for render. Don't go on the code, this is made up, So any Ideas ? Fragments ? Any help will be appreciated. Thank you. To render component by condition simply use In my example we use This example use class properties plugin. means autobind and is the same as using in constuctor method Working example: Reviewing your code: You don't need constructor here.class Blah extends Component {
constructor(props) {
super(props);
}
handleComponent = (event) => {
let divid = event.target.getAttribute('id');
if (divid === 'col') {
// I want to render component by this condition
} else if (divid === 'ro') {
// or I want to render component by this condition
} else {
//or I want to render component by this condition
}
};
render() {
const { classes } = this.props;
return (
{ I want to render my component here after click }
</div>
);
}
}class Flow extends Component {
constructor(props){
super(props);
};
render() {
return(
);
}
}var foo = withStyles(styles)(Flow)
I am not checking for the true but specific value. please refer to code.
– Sandy
Jul 3 at 7:47
For this you need to understand the react better. you can keep all the conditional content inside render method with state value condition. add state divID and change state divID onClick then render the component according to the condition. let me know if you need the answer
– Venkat.R
Jul 3 at 8:05
@Sandy See my answer, it explains how to render component conditionally depending on current state and user interaction/click.
– loelsonk
Jul 3 at 10:20
1 Answer
1
switch statement.switchstate to store current active component. statecurrentrenderMyComponent method takes care of rendering one of three possible components.renderMyComponenthandleChange method changes current state and triggers new render of App component.handleChangecurrentrenderApprenderMyComponent = () => {this.renderMyComponent = this.renderMyComponent.bind(this);const ComponentOne = () =>
const ComponentTwo = () =>
const ComponentThree = () =>
class App extends React.Component {
state = { current: 0 }
renderMyComponent = () => {
// Our switch conditional render
switch(this.state.current) {
case 0:
return <ComponentOne />;
case 1:
return <ComponentTwo />;
case 2:
return <ComponentThree />;
default:
return null;
}
}
handleChange = (event) => {
// We are looking for data-trigger attribute
// In this example we expect type number but trigger holds string
// That's why we 'cast' to a number using Number()
const current = Number(event.target.dataset.trigger);
// Sets new state of current component and triggers new render
this.setState({ current })
}
render() {
return (
Pick component to render
Render 1
Render 2
Render 3
{this.renderMyComponent()}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js...
constructor(props){
super(props);
}
...
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
on click change the state called clicked and display component if state clicked to true
– Venkat.R
Jul 3 at 7:17