I am simply trying to pass a value back up to a parent component when I invoke a method in a child component.
I have a parent component called Job. It renders a child component called SummaryChart. When a bar on the barchart is clicked from within SummaryChart, I want it to tell Job which bar was clicked, and to open a modal.
Parent Component
class Job extends Component {
constructor(props)
{
super(props);
this.state = {
...
}
this.getSequenceView = this.getSequenceView.bind(this);
}
getSequenceView(config, event)
{
console.log(config.someData);
$('#help-modal').modal();
}
render()
{
return (
<SummaryChart
handleBarClick={() => this.getSequenceView(config, event)}
/>
);
}
Child Component
class SummaryChart extends Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
events: {
dataPointSelection: function(event, chartContext, config) {
props.handleBarClick(config, event);
},
}
}
}
render() {
return (
...
);
}
}
I receive the following error when I click:
Uncaught ReferenceError: config is not defined
I'm thinking my error must lie in my parent component when I pass the prop to SummaryChart, but I don't know how else to tell the method to expect two arguments. Other examples have things like hard-coded props as arguments, but I want to use information from ApexCharts click events to pass back up to the parent.
You're missing the method argument in the child call.
<SummaryChart
handleBarClick={(config, event) => this.getSequenceView(config, event)}
/>
Related
I want to call from child component function.
Where I want to call component ? Inside Parent. TO explain better
---Parent( get function from child)
---Child ( from parent call my function )
I am using class component React.
Parent component ->
constructor(props) {
super(props);
this.componentRef = React.createRef();
}
selectedColors = (colors) => {
let { theme, formValuesTheme } = this.props;
this.componentRef.current.handleChange("red");
};
<Field
id="colorDropdown"
name="colorDropdown"
component={renderColorDropdown}
label={intl.formatMessage(messages.colorTheme)}
options={options}
onChange={selectedColors}
/>
Child component ->
class SketchExample extends React.Component {
handleChange = (color) => {
console.log("I NEED BE CALLED FROM PARENT", color);
this.props.input.onChange(color.hex);
};
ERROR message is ->
TypeError: _this.componentRef.current.handleChange is not a function
I am building a small app in React -- trying to call a function from my parent component Job when a bar from a bar chart (ApexCharts) is clicked in a child component SummaryChart.
Naturally, the way I have read to do this is to define a function in Job called getSequenceView, and pass it in a prop to Chart under the alias handleBarClick, then call this.props.handleBarClick from SummaryChart to invoke it in the parent.
Parent Component
class Job extends Component {
constructor(props)
{
super(props);
this.state = {
...
}
this.getSequenceView = this.getSequenceView.bind(this);
}
getSequenceView(config, event)
{
console.log(config.someData);
$('#help-modal').modal();
}
render()
{
return (
<SummaryChart
handleBarClick={this.getSequenceView}
/>
);
}
Child Component
class SummaryChart extends Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
events: {
dataPointSelection: function(event, chartContext, config) {
this.props.handleBarClick();
},
}
}
}
render() {
return (
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
width="100%"
/>
);
}
}
ApexCharts docs for handling events here!
I have a feeling that since I am passing this.state.options as a prop to the actual Chart object from ApexCharts that when the bar is clicked, the event registers from the Chart object instead of SummaryChart and perhaps that is why I am receiving the error.
app.js:66798 Uncaught TypeError: Cannot read property 'handleBarClick'
of undefined
Issue
In the constructor this.props hasn't been set yet.
Solution
Access the props that were passed to the constructor.
constructor(props) {
super(props);
this.state = {
options: {
chart: {
events: {
dataPointSelection: function (event, chartContext, config) {
props.handleBarClick();
}
}
}
}
};
}
I'm new to ReactJs and I'm trying to pass a function to my child component that updates a state in the parent component!
It seems like the child component can't find the passed function.
The errors message I'm receiving when I click:
TypeError: this.props.cencelLogin is not a function
Another one when I access child component "this is a console error that doesn't crash the program":
Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
I console.log(this.props) = I can't find any evidence that getBackCancelLoginForm is exists. "I'm new to this"
I watched a few videos of components communication. It seems that this technique is working; however, this technique is not working for me because of a minor mistake.
this is my parent class component:
class Menu extends Component {
constructor(props){
super(props);
this.state = {
show: 'Defualt'
};
this.getBackCancelLoginForm = this.getBackCancelLoginForm.bind(this);
}
getBackCancelLoginForm = (showVal) => {
this.setState({ show: showVal });
}
render() {
this.CheckShowMenu();
return (
<div>
{ this.state.show === "Defualt" ? <DefualtMenu cencelLogin={this.getBackCancelLoginForm}/> : (<div> </div>)}
</div>
);
}
}
this is my child class component:
class loginCom extends Component {
constructor(props){
super();
this.state = {
cancelSignIn: "Defualt",
};
this.cancel = this.cancel.bind(this);
}
cancel(props){
this.props.cencelLogin(this.state.cancelSignIn);
}
render() {
return (
<div>
<div className="headerCancelBox" onClick={this.cancel.bind(this)}>
</div>
);
}
}
In the actual result: the sing in form should desperate.
when clicking 'X' on the child component -> the function cancel should fire which call the prop function.
which cause child function to be replaced with another child function "Default Menu"
I find my silly mistake! I have to admit that I spend hrs on solving this.
I will leave the answer here forever get the same issue!
I just passed the prop to the wrong child function. :)
New to react from angular
Receiving the error:
The above error occurred in the <div> component: in div
Consider adding an error boundary to your tree to customize error handling behavior.
I don't quite understand why div and what the error is talking about?
I am trying to click on a row and pass the values from row to parent.
In my top level parent component, I have a function that would set the value of the selected row and in the child, the selected row is pass to props.
Parent:
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
activeItem: []
}
this.setActiveItem = this.setActiveItem.bind(this)
}
setActiveItem = userSelect => {
this.setState({ activeItem: userSelect })
}
render(){
<Child activeItem={this.setActiveItem}/>
}
In my child, I use ag-grid using onRowClicked. The error is getting thrown in this.props.setActiveItem(event.data)
class Child extends React.Component {
constructor(props) {
super(props)
}
onRowClicked = event => {
//eslint-disable-next-line no-console
console.log('tester', event.data) //okay, shows data
this.props.setActiveItem(event.data) //not okay, throws error
}
grid = () => {
return (
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.data}
onRowClicked={this.onRowClicked}
/>
)
}
render() {
if (this.state.data.length > 0) {
return <div className="ag-mod">{this.grid()}</div>
}
return <br />
}
}
//also here's the prop for child
Child.propTypes = {
setActiveItem: PropTypes.func
}
You are passing down setActiveItem from parent to child as activeItem.
<Child activeItem={this.setActiveItem}/>
So in child call it with the name you gave in when passing it down.
onRowClicked = event => {
//eslint-disable-next-line no-console
console.log('tester', event.data) //okay, shows data
this.props.activeItem(event.data) //not okay, throws error
}
Also, consider wrapping your components in an error boundary as the error mentioned. It helps. You can read about that here
I already know all the theory of React Native unidirectional and things like that, what I would want is a piece of code that shows how can you update a state of another component.
I have tried something this sample:
class Parent extends React.Component {
constructor(props) {
super(props)
// Bind the this context to the handler function
this.handler = this.handler.bind(this);
// Set some state
this.state = {
messageShown: false
};
}
// This method will be sent to the child component
handler() {
this.setState({
messageShown: true
});
}
// Render the child component and set the action property with the handler as value
render() {
return <Child action={this.handler} />
}
}
class Child extends React.Component {
render() {
return (
<div>
{/* The button will execute the handler function set by the parent component */}
<Button onClick={this.props.action} />
</div>
)
}
}
It just does not seem to work for me. Pressing Button nothing seems to fire or do anything!
Also if I add the child component within the Parent render() then the child UI shows on my parent which I dont want to... How to just update Parent!