How to map DispatchToProps method to the onClick property for nested react classes?
up vote
0
down vote
favorite
I have a react class "Property", which has some name and value in its redux-state. The value of one 'Property' can be another 'Property' with a name and value. It depends on the user what level of nesting he wants. So I have called 'Property' class from the same 'Property' class. And have mapped the OnClick property of one of its propertyKey to mapDispatchToProps method for some processing.
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}};
This is the OnClick statement:
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>
After we add data to the 'Second-level' of 'Property', and if we try to click on its 'key' (which has OnClick property), following error is thrown:
_this2.props.onPropertyClicked is not a function
It seems it is unable to map the click property with the dispatch method.
It works fine at the first level, and allows you to add as many as name, value you want. But is failing at second nested level.
EDIT:Adding Property Class
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Property extends Component{
constructor(props){
super(props);
this.state = {
property:{
key:"",
value:null
},
key:this.props.propertyKey
}
}
render(){
let dummyProperties={...this.props.property};
for(var objectKey in dummyProperties ){
console.log(objectKey);
console.log(dummyProperties[objectKey]);
}
return(
<div>
{
(dummyProperties[this.props.propertyKey]["type"]==='property')?
<div>
<p>
<span>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b> {dummyProperties[this.props.propertyKey]["value"]}</span>
</p>
</div>:
<div>
<p>
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b></span>
</p>
<div>
{
(dummyProperties[this.props.propertyKey]["value"]!==undefined)?
<div>
<ul>
{dummyProperties[this.props.propertyKey]["value"].map(property => {
let out = Object.keys(property).map(propKey => [propKey]);
return <li key={out[0]}>
<Property property={property} propertyKey={out[0]}/>
</li>
})}
</ul>
</div>:
null
}
</div>
</div>
}
</div>
)
};
}
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}
};
export default connect(null, mapDispatchToProps)(Property);
How should I make this work? Is anything extra needs to be done when working with such nesting???
javascript reactjs redux react-redux
add a comment |
up vote
0
down vote
favorite
I have a react class "Property", which has some name and value in its redux-state. The value of one 'Property' can be another 'Property' with a name and value. It depends on the user what level of nesting he wants. So I have called 'Property' class from the same 'Property' class. And have mapped the OnClick property of one of its propertyKey to mapDispatchToProps method for some processing.
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}};
This is the OnClick statement:
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>
After we add data to the 'Second-level' of 'Property', and if we try to click on its 'key' (which has OnClick property), following error is thrown:
_this2.props.onPropertyClicked is not a function
It seems it is unable to map the click property with the dispatch method.
It works fine at the first level, and allows you to add as many as name, value you want. But is failing at second nested level.
EDIT:Adding Property Class
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Property extends Component{
constructor(props){
super(props);
this.state = {
property:{
key:"",
value:null
},
key:this.props.propertyKey
}
}
render(){
let dummyProperties={...this.props.property};
for(var objectKey in dummyProperties ){
console.log(objectKey);
console.log(dummyProperties[objectKey]);
}
return(
<div>
{
(dummyProperties[this.props.propertyKey]["type"]==='property')?
<div>
<p>
<span>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b> {dummyProperties[this.props.propertyKey]["value"]}</span>
</p>
</div>:
<div>
<p>
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b></span>
</p>
<div>
{
(dummyProperties[this.props.propertyKey]["value"]!==undefined)?
<div>
<ul>
{dummyProperties[this.props.propertyKey]["value"].map(property => {
let out = Object.keys(property).map(propKey => [propKey]);
return <li key={out[0]}>
<Property property={property} propertyKey={out[0]}/>
</li>
})}
</ul>
</div>:
null
}
</div>
</div>
}
</div>
)
};
}
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}
};
export default connect(null, mapDispatchToProps)(Property);
How should I make this work? Is anything extra needs to be done when working with such nesting???
javascript reactjs redux react-redux
Can you postProperty
class?
– yaswanth
Sep 5 at 11:24
Added the Property.js class. You can check
– Nikhil Patil
Sep 5 at 11:35
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a react class "Property", which has some name and value in its redux-state. The value of one 'Property' can be another 'Property' with a name and value. It depends on the user what level of nesting he wants. So I have called 'Property' class from the same 'Property' class. And have mapped the OnClick property of one of its propertyKey to mapDispatchToProps method for some processing.
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}};
This is the OnClick statement:
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>
After we add data to the 'Second-level' of 'Property', and if we try to click on its 'key' (which has OnClick property), following error is thrown:
_this2.props.onPropertyClicked is not a function
It seems it is unable to map the click property with the dispatch method.
It works fine at the first level, and allows you to add as many as name, value you want. But is failing at second nested level.
EDIT:Adding Property Class
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Property extends Component{
constructor(props){
super(props);
this.state = {
property:{
key:"",
value:null
},
key:this.props.propertyKey
}
}
render(){
let dummyProperties={...this.props.property};
for(var objectKey in dummyProperties ){
console.log(objectKey);
console.log(dummyProperties[objectKey]);
}
return(
<div>
{
(dummyProperties[this.props.propertyKey]["type"]==='property')?
<div>
<p>
<span>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b> {dummyProperties[this.props.propertyKey]["value"]}</span>
</p>
</div>:
<div>
<p>
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b></span>
</p>
<div>
{
(dummyProperties[this.props.propertyKey]["value"]!==undefined)?
<div>
<ul>
{dummyProperties[this.props.propertyKey]["value"].map(property => {
let out = Object.keys(property).map(propKey => [propKey]);
return <li key={out[0]}>
<Property property={property} propertyKey={out[0]}/>
</li>
})}
</ul>
</div>:
null
}
</div>
</div>
}
</div>
)
};
}
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}
};
export default connect(null, mapDispatchToProps)(Property);
How should I make this work? Is anything extra needs to be done when working with such nesting???
javascript reactjs redux react-redux
I have a react class "Property", which has some name and value in its redux-state. The value of one 'Property' can be another 'Property' with a name and value. It depends on the user what level of nesting he wants. So I have called 'Property' class from the same 'Property' class. And have mapped the OnClick property of one of its propertyKey to mapDispatchToProps method for some processing.
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}};
This is the OnClick statement:
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>
After we add data to the 'Second-level' of 'Property', and if we try to click on its 'key' (which has OnClick property), following error is thrown:
_this2.props.onPropertyClicked is not a function
It seems it is unable to map the click property with the dispatch method.
It works fine at the first level, and allows you to add as many as name, value you want. But is failing at second nested level.
EDIT:Adding Property Class
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Property extends Component{
constructor(props){
super(props);
this.state = {
property:{
key:"",
value:null
},
key:this.props.propertyKey
}
}
render(){
let dummyProperties={...this.props.property};
for(var objectKey in dummyProperties ){
console.log(objectKey);
console.log(dummyProperties[objectKey]);
}
return(
<div>
{
(dummyProperties[this.props.propertyKey]["type"]==='property')?
<div>
<p>
<span>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b> {dummyProperties[this.props.propertyKey]["value"]}</span>
</p>
</div>:
<div>
<p>
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b></span>
</p>
<div>
{
(dummyProperties[this.props.propertyKey]["value"]!==undefined)?
<div>
<ul>
{dummyProperties[this.props.propertyKey]["value"].map(property => {
let out = Object.keys(property).map(propKey => [propKey]);
return <li key={out[0]}>
<Property property={property} propertyKey={out[0]}/>
</li>
})}
</ul>
</div>:
null
}
</div>
</div>
}
</div>
)
};
}
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}
};
export default connect(null, mapDispatchToProps)(Property);
How should I make this work? Is anything extra needs to be done when working with such nesting???
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Property extends Component{
constructor(props){
super(props);
this.state = {
property:{
key:"",
value:null
},
key:this.props.propertyKey
}
}
render(){
let dummyProperties={...this.props.property};
for(var objectKey in dummyProperties ){
console.log(objectKey);
console.log(dummyProperties[objectKey]);
}
return(
<div>
{
(dummyProperties[this.props.propertyKey]["type"]==='property')?
<div>
<p>
<span>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b> {dummyProperties[this.props.propertyKey]["value"]}</span>
</p>
</div>:
<div>
<p>
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b></span>
</p>
<div>
{
(dummyProperties[this.props.propertyKey]["value"]!==undefined)?
<div>
<ul>
{dummyProperties[this.props.propertyKey]["value"].map(property => {
let out = Object.keys(property).map(propKey => [propKey]);
return <li key={out[0]}>
<Property property={property} propertyKey={out[0]}/>
</li>
})}
</ul>
</div>:
null
}
</div>
</div>
}
</div>
)
};
}
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}
};
export default connect(null, mapDispatchToProps)(Property);
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Property extends Component{
constructor(props){
super(props);
this.state = {
property:{
key:"",
value:null
},
key:this.props.propertyKey
}
}
render(){
let dummyProperties={...this.props.property};
for(var objectKey in dummyProperties ){
console.log(objectKey);
console.log(dummyProperties[objectKey]);
}
return(
<div>
{
(dummyProperties[this.props.propertyKey]["type"]==='property')?
<div>
<p>
<span>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b> {dummyProperties[this.props.propertyKey]["value"]}</span>
</p>
</div>:
<div>
<p>
<span onClick = {()=>this.props.onPropertyClicked(this.props.propertyKey)}>{this.props.propertyKey}</span>:
<span><b>name :</b> {dummyProperties[this.props.propertyKey]["name"]} </span>
<span><b>value : </b></span>
</p>
<div>
{
(dummyProperties[this.props.propertyKey]["value"]!==undefined)?
<div>
<ul>
{dummyProperties[this.props.propertyKey]["value"].map(property => {
let out = Object.keys(property).map(propKey => [propKey]);
return <li key={out[0]}>
<Property property={property} propertyKey={out[0]}/>
</li>
})}
</ul>
</div>:
null
}
</div>
</div>
}
</div>
)
};
}
const mapDispatchToProps = dispatch =>{
return{
onPropertyClicked : (propertyKey)=> dispatch({type: 'ChangeSelectedObject', propertyKey:propertyKey})
}
};
export default connect(null, mapDispatchToProps)(Property);
javascript reactjs redux react-redux
javascript reactjs redux react-redux
edited Sep 5 at 11:34
asked Sep 5 at 11:01
Nikhil Patil
12
12
Can you postProperty
class?
– yaswanth
Sep 5 at 11:24
Added the Property.js class. You can check
– Nikhil Patil
Sep 5 at 11:35
add a comment |
Can you postProperty
class?
– yaswanth
Sep 5 at 11:24
Added the Property.js class. You can check
– Nikhil Patil
Sep 5 at 11:35
Can you post
Property
class?– yaswanth
Sep 5 at 11:24
Can you post
Property
class?– yaswanth
Sep 5 at 11:24
Added the Property.js class. You can check
– Nikhil Patil
Sep 5 at 11:35
Added the Property.js class. You can check
– Nikhil Patil
Sep 5 at 11:35
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
I just share you a quick example. In the following snippet, I'm having a callback function against key 'authuser'. I will be using this key whenever I need to dispatch the function.
import authUser from 'path';
const mapDispatchToProps = dispatch => {
return {
authUser: (usr, password) => dispatch(authUser(usr, password)),
}
}
This 'path' is the path of file or anything else? And there is no action type specified here:
– Nikhil Patil
Sep 5 at 11:48
The path where you have written the function import authUser from './src/actions/index.js';
– Kosalram Rama Krishnan
Sep 5 at 15:27
add a comment |
up vote
0
down vote
accepted
Edited:
For those who are stumbling on the same issue, this is how I solved this:
Class Property extends React.Component
{
//some code
render(){
return(
<PropertyWrapper id="{someData}"/> // recursively calling same class (change1)
//some code
)
}
}
var PropertyWrapper = connect(mapStateToProps)(Property); // (change2)
export default PropertyWrapper
When exporting the class, don't just export as it is. Instead wrap it in some variable and the export the variable. And call the wrapper as a recursive class.
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Michel
Sep 28 at 12:07
Edited @Michel (sorry for being late)
– Nikhil Patil
yesterday
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I just share you a quick example. In the following snippet, I'm having a callback function against key 'authuser'. I will be using this key whenever I need to dispatch the function.
import authUser from 'path';
const mapDispatchToProps = dispatch => {
return {
authUser: (usr, password) => dispatch(authUser(usr, password)),
}
}
This 'path' is the path of file or anything else? And there is no action type specified here:
– Nikhil Patil
Sep 5 at 11:48
The path where you have written the function import authUser from './src/actions/index.js';
– Kosalram Rama Krishnan
Sep 5 at 15:27
add a comment |
up vote
0
down vote
I just share you a quick example. In the following snippet, I'm having a callback function against key 'authuser'. I will be using this key whenever I need to dispatch the function.
import authUser from 'path';
const mapDispatchToProps = dispatch => {
return {
authUser: (usr, password) => dispatch(authUser(usr, password)),
}
}
This 'path' is the path of file or anything else? And there is no action type specified here:
– Nikhil Patil
Sep 5 at 11:48
The path where you have written the function import authUser from './src/actions/index.js';
– Kosalram Rama Krishnan
Sep 5 at 15:27
add a comment |
up vote
0
down vote
up vote
0
down vote
I just share you a quick example. In the following snippet, I'm having a callback function against key 'authuser'. I will be using this key whenever I need to dispatch the function.
import authUser from 'path';
const mapDispatchToProps = dispatch => {
return {
authUser: (usr, password) => dispatch(authUser(usr, password)),
}
}
I just share you a quick example. In the following snippet, I'm having a callback function against key 'authuser'. I will be using this key whenever I need to dispatch the function.
import authUser from 'path';
const mapDispatchToProps = dispatch => {
return {
authUser: (usr, password) => dispatch(authUser(usr, password)),
}
}
answered Sep 5 at 11:17
Kosalram Rama Krishnan
604110
604110
This 'path' is the path of file or anything else? And there is no action type specified here:
– Nikhil Patil
Sep 5 at 11:48
The path where you have written the function import authUser from './src/actions/index.js';
– Kosalram Rama Krishnan
Sep 5 at 15:27
add a comment |
This 'path' is the path of file or anything else? And there is no action type specified here:
– Nikhil Patil
Sep 5 at 11:48
The path where you have written the function import authUser from './src/actions/index.js';
– Kosalram Rama Krishnan
Sep 5 at 15:27
This 'path' is the path of file or anything else? And there is no action type specified here:
– Nikhil Patil
Sep 5 at 11:48
This 'path' is the path of file or anything else? And there is no action type specified here:
– Nikhil Patil
Sep 5 at 11:48
The path where you have written the function import authUser from './src/actions/index.js';
– Kosalram Rama Krishnan
Sep 5 at 15:27
The path where you have written the function import authUser from './src/actions/index.js';
– Kosalram Rama Krishnan
Sep 5 at 15:27
add a comment |
up vote
0
down vote
accepted
Edited:
For those who are stumbling on the same issue, this is how I solved this:
Class Property extends React.Component
{
//some code
render(){
return(
<PropertyWrapper id="{someData}"/> // recursively calling same class (change1)
//some code
)
}
}
var PropertyWrapper = connect(mapStateToProps)(Property); // (change2)
export default PropertyWrapper
When exporting the class, don't just export as it is. Instead wrap it in some variable and the export the variable. And call the wrapper as a recursive class.
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Michel
Sep 28 at 12:07
Edited @Michel (sorry for being late)
– Nikhil Patil
yesterday
add a comment |
up vote
0
down vote
accepted
Edited:
For those who are stumbling on the same issue, this is how I solved this:
Class Property extends React.Component
{
//some code
render(){
return(
<PropertyWrapper id="{someData}"/> // recursively calling same class (change1)
//some code
)
}
}
var PropertyWrapper = connect(mapStateToProps)(Property); // (change2)
export default PropertyWrapper
When exporting the class, don't just export as it is. Instead wrap it in some variable and the export the variable. And call the wrapper as a recursive class.
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Michel
Sep 28 at 12:07
Edited @Michel (sorry for being late)
– Nikhil Patil
yesterday
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
Edited:
For those who are stumbling on the same issue, this is how I solved this:
Class Property extends React.Component
{
//some code
render(){
return(
<PropertyWrapper id="{someData}"/> // recursively calling same class (change1)
//some code
)
}
}
var PropertyWrapper = connect(mapStateToProps)(Property); // (change2)
export default PropertyWrapper
When exporting the class, don't just export as it is. Instead wrap it in some variable and the export the variable. And call the wrapper as a recursive class.
Edited:
For those who are stumbling on the same issue, this is how I solved this:
Class Property extends React.Component
{
//some code
render(){
return(
<PropertyWrapper id="{someData}"/> // recursively calling same class (change1)
//some code
)
}
}
var PropertyWrapper = connect(mapStateToProps)(Property); // (change2)
export default PropertyWrapper
When exporting the class, don't just export as it is. Instead wrap it in some variable and the export the variable. And call the wrapper as a recursive class.
edited yesterday
answered Sep 6 at 10:11
Nikhil Patil
12
12
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Michel
Sep 28 at 12:07
Edited @Michel (sorry for being late)
– Nikhil Patil
yesterday
add a comment |
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Michel
Sep 28 at 12:07
Edited @Michel (sorry for being late)
– Nikhil Patil
yesterday
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Michel
Sep 28 at 12:07
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
– Michel
Sep 28 at 12:07
Edited @Michel (sorry for being late)
– Nikhil Patil
yesterday
Edited @Michel (sorry for being late)
– Nikhil Patil
yesterday
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52183523%2fhow-to-map-dispatchtoprops-method-to-the-onclick-property-for-nested-react-class%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you post
Property
class?– yaswanth
Sep 5 at 11:24
Added the Property.js class. You can check
– Nikhil Patil
Sep 5 at 11:35