I have a header component that contain a button and I want this button to display another component(modal page) when it's clicked.
Can I do something like this:
Here's my header component:
import ComponentToDisplay from './components/ComponentToDisplay/index'
class Header extends React.Component {
constructor(props) {
super(props)
}
props : {
user: User
}
_handleInvitePlayerClick = () => {
this.refs.simpleDialog.show();
}
render(){
return(
<Button onClick={this._handleInvitePlayerClick} ><myButton/></Button>
<ComponentToDisplay />
)
}
}
Here is my component for the modal page that should be displayed when the button on the other component gets clicked:
class ComponentToDisplay extends React.Component {
componentDidMount() {
}
render() {
return (
<div>
<SkyLight
ref="simpleDialog"
title={"Title for the modal"}>
{"Text inside the modal."}
<Button onClick={() => this.refs.simpleDialog.hide()}>{"Close modal"}</Button>
</SkyLight>
</div>
)
}
}
Library being used for the modal : https://github.com/marcio/react-skylight
More like this:
class Header extends React.Component {
constructor(props) {
super(props)
}
props: {
user: User
}
render() {
return (
<Button onClick={() => this.refs.componentToDisplay.showMe()}><myButton /></Button>
<ComponentToDisplay ref="componentToDisplay" />
)
}
}
Being sure to expose a showMe() method on your child component:
class ComponentToDisplay extends React.Component {
showMe() {
this.refs.simpleDialog.show();
}
render() {
return (
<div>
<SkyLight
ref="simpleDialog"
title={"Title for the modal"}>
{"Text inside the modal."}
<Button onClick={() => this.refs.simpleDialog.hide()}>{"Close modal"}</Button>
</SkyLight>
</div>
)
}
}
Basically, what's going on here is you wrap the SkyLight's show() method in your child component's own method (in this case, showMe()). Then, in your parent component you add a ref to your included child component so you can reference it and call that method.
Related
Child:
class Plus extends React.Component{
constructor(props){
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
console.log('It's Working!')
this.props.handleButtonChange()
}
render(){
return (
<div>
<i
className="fa fa-plus fa-2x"
onClick={() => this.handleClick()}
></i>
</div>
);
}
}
export default Plus;
Parent:
class NoteCreation extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="note-creation">
<form action="">
<Plus handleButtonChange={this.props.handleButtonChange} />
</form>
</div>
);
}
}
export default NoteCreation;
GrandParent Component:
class App extends React.Component {
constructor() {
super();
this.state = {
buttonStat : false
};
this.handleButtonChange = this.handleButtonChange(this);
}
handleButtonChange(){
this.setState({
buttonStat : true
})
}
render() {
return (
<div className="App">
<NoteCreation
handleButtonChange={this.handleButtonChange}
/>
</div>
);
}
}
export default App;
I simply want to pass the method handleButtonChange() from grandParent all the way to child (which is a button), as the button is clicked it triggers the click event which fires up this function making changes in grandparent component(i.e. setting button state)
where am i wrong at or this approach is completely wrong I am really new to react.
i am just want to set state in grandParent via child click event.
i keep getting this error TypeError: this.props.handleButtonChange is not a function
would appreciate any help
You have a typo in your top component
It should be
this.handleButtonChange = this.handleButtonChange.bind(this);
and not
this.handleButtonChange = this.handleButtonChange(this);
Alternatively you can declare your method like this
handleButtonChange = () => {
this.setState({
buttonStat : true
})
}
without using bind at all.
In grandParent component, you should bind it to current component by keyword bind to pass it through props.
this.handleButtonChange = this.handleButtonChange.bind(this);
I created a reset function in App.js and want to call it by an onclick in two other components. the problem is that it works in one component but doesn't in the other.
Here are the codes snippets
App.js
import React from 'react';
import Result from './components/Result';
import GeneralResult from './components/GeneralResult';
class App extends Component {
constructor(props) {
super(props);
this.state = {
result: '',
counter: 0,
}
}
// Reset function
handleReset=()=>{
this.setState({
result: '',
counter: 0,
)}
renderResult() {
return (
<div>
<Result reset={()=>this.handleReset()} />
<GeneralResult back={()=>this.handleReset()} />
</div>
);
}
Result.js
first component making use of reset()
function Result(props) {
return (
<div>
<span>
<button onClick={props.reset}>Replay</button>
</span>
</div>
);
}
export default Result;
GeneralResult.js
second component making use of the reset
import React, { Component } from 'react';
export default class GeneralResult extends Component {
render() {
return (
<React.Fragment>
<h2>Congratulations you won!</h2>
<span>
<button onClick={props.back}> Back to Question</button>
</span>
</React.Fragment>
);
}
}
You can pass the handler as props, and render the component from the parent class.
class Child extends Component {
render(){
return(
<button onClick = {this.props.onClick}></button>
)
}
}
export default Child;
import Child from 'path/to/child';
class Parent extends Component {
onClick = (e) => {
//do something
}
render () {
return(
<Child onClick = {onCLick}/>
)
}
}
Problem is that GeneralResult is class based component. so when you need to access props passed to it. you have to use this.props.
export default class GeneralResult extends Component {
render() {
return (
<React.Fragment>
<h2>Congratulations you won!</h2>
<span>
// you need to change "props.back"
// to "this.props.back"
<button onClick={this.props.back}> Back to Question</button>
</span>
</React.Fragment>
);
}
}
I am currently trying to get the child component functions using the ref in the following way but it doesn't show any of the details.
class ChildCompent extends React.Component {
constructor(props){
super(props);
}
_function1 =()=>{
/* ...... */
}
_function1 =()=>{
/* ...... */
}
render (){
return (
<div>
ChildComponent
</div>
)
}
}
let ComposedChild = compose(
/* --- graphql query */
)(ChildComponent);
class ParentComponent extends React.Component {
constructor(props){
super(props);
}
_onClick = ()=>{
console.log(this.refs.childComponent)
// doesn't show the _function1 and _function2
}
render (){
return (
<div onClick={this._onClick}>
<div>Testing</div>
<ChildComponent ref="childComponent"/>
</div>
)
}
}
You should make use of ref callback to set ref on a component
See this answer:
How to access a DOM element in React? What is the equilvalent of document.getElementById() in React
After that to access another component's function you can do that like this.childComponent._function1()
Also you need to make use of the component returned after wrapping it with the compose function in the ParentComponent.
class ChildComponent extends React.Component {
constructor(props){
super(props);
}
_function1 =()=>{
/* ...... */
console.log('hello');
}
render (){
return (
<div>
ChildComponent
</div>
)
}
}
let ComposedChild = compose(
/* --- graphql query */
)(ChildComponent);
class ParentComponent extends React.Component {
constructor(props){
super(props);
}
_onClick = ()=>{
this.childComponent._function1()
// doesn't show the _function1 and _function2
}
render (){
return (
<div onClick={this._onClick}>
<div>Testing</div>
<ComposedChild ref={(ref) => this.childComponent = ref}/>
</div>
)
}
}
I want to create a reusable component where the DOM structure can be different each time the component is rendered. Let's say I have this
class Comp extends React.Component {
constructor() {
super()
this.state = {
click: null,
}
}
render() {
return(
<div>
{this.props.chidren}
</div>
)
}
handleButton1() {
this.setState({click: 'button1'});
}
handleButton2() {
this.setState({click: 'button2'});
}
}
class SubComp1 extends React.Component {
render() {
return(
<button onClick={() => this.props.handleButton1()}>Button 1</button>
)
}
}
class SubComp2 extends React.Component {
render() {
return (
<button onClick={() => this.props.handleButton2()}>Button 2</button>
)
}
}
ReactDOM.render((
<Comp>
<div id="somediv">
<div id="andanother">
<SubComp1 />
</div>
</div>
<div id="andanotherother">
<SubComp2 />
</div>
</Comp>), document.getElementById('app'))
Currently, the two subcomponents do not have access to their respective handler functions. What's the best way of passing the functions handleButton1 and handleButton2 to the subcomponents assuming that their position in the DOM is dynamic and might change depending on the layout of the page.
I have thought of 2 solutions so far:
Iterating inside the props.children until I find the element of interest then clone it with the property
Using ref and somehow render the subcomponents after the main component has been rendered through the componentDidMount callback.
What are your thoughts on this?
This is a place where using React's Context would be the most straightforward solution.
Another solution would be to use Redux actions, but that would make your component less reusable and more tightly coupled with your application, which you may or may not care about.
Why not do something like this:
class Comp extends React.Component {
constructor() {
super()
this.state = {
click: null,
}
}
render() {
return(
<div>
{this.props.chidren}
</div>
)
}
handleButton(button) {
this.setState({click: button});
}
}
Then in the subcomponents you can do something like
class SubComp1 extends React.Component {
render() {
return(
<button onClick={() => this.props.handleButton('button1')}>Button 1</button>
)
}
}
class SubComp2 extends React.Component {
render() {
return (
<button onClick={() => this.props.handleButton('button2')}>Button 2</button>
)
}
}
One Alternative option which might fit your needs is to build a higher order component, which decorates another component with some additional functionality, below is a quick example of how this may work for you,
The higher order component:
const Comp = ComposedComponent =>
class Comp extends React.Component {
constructor(props) {
super(props)
this.handleButton = this.handleButton.bind(this);
this.state = {
click: null,
}
}
handleButton(button) {
this.setState({click: button});
}
render() {
return(
<ComposedComponent
onClick={this.handleButton}
/>
)
}
}
export default Comp;
The child component:
class SubComp1 extends React.Component {
render() {
return(
<button onClick={() => this.props.onClick('button1')}>Button 1</button>
)
}
}
How to use it:
const ExtendedComp = Comp(SubComp1);
<ExtendedComp />
would this be suitable for your task?
I'm new on react world, I would show components from sibling components.
I have parent component:
import Toast from './components/Toast/Toast'
class App extends Component {
constructor(){
super();
this.state = {
showToast:false
};
}
render() {
return (
<div id="cont">
<Toast showToast={this.state.showToast}/>
<Header />
</div>
);
}
}
In my Toast component:
class Toast extends Component {
constructor(props) {
super(props);
}
render() {
const showToast = this.props.showToast;
let toast = null;
if (showToast) {
toast = <div className="visible">Toast Ok</div>;
}else{
toast = null;
}
return (
<div>
{toast}
</div>
);
}
}
export default Toast;
And in my Header component I have:
class Header extends Component {
render() {
return (
<button> // With click, show toastComponents so setState parent </button>
)
}
So if I click on button I would set state key showToast for show my components.
You can pass a function down to your <Header> component, then call it when the button is clicked.
let showToast = () => this.setState({ showToast: true });
// ...
<Toast showToast={this.state.showToast}/>
<Header onClick={showToast}>
Then all you need to do is pass this prop through to the click handler inside <Header>.
<button onClick={this.props.onClick}>