johnbee johnbee - 1 month ago 9
React JSX Question

Reactjs Tutorial: Cannot read property 'props' of undefined

I have the problem when I use the Reactjs, I'm really new to Reactjs, so maybe it's a easy problem
I want to use the class ClickButton in the UserInfo,but I don't know how to change the name through props

import React, { PropTypes } from 'react';
import { Button } from 'antd';
import { connect } from 'react-redux';
import styles from './ClickButton.less';

const ClickButton = ({ todos,dispatch }) => {

const userinforclick = () => {
dispatch({
type: 'todos/clickbutton',
payload: !todos['click_button'],
});
};

return (
<span>
< span type="primary" className={ styles.show } onClick={ userinforclick.bind(this) } > {this.props.name} < /span >
</span>
);


};

function clickbutton({ todos }){
return{
todos:todos,
}
}

export default connect(clickbutton)(ClickButton)
and i use the ClickButton in UserInfo:
import React from 'react'
import styles from './Userinfo.less'
import ClickButton from '../../components/Button/ClickButton'
import { connect } from 'react-redux';
import { Spin } from 'antd'

const Userinfo = ({ todos,dispatch }) => {
const { userinfo, userinfoloading, click_button } = todos;

if(userinfoloading) {
return <Spin />;
}
const renderList = () => {
return(
<div className={ styles.userInfodiv}>
<div>
<span className={ styles.userInfoTitle }>userinfo</span>
</div>
<div className = { styles.slice }></div>
<div className = { styles.userInfoBody}>
<div className = { styles.userInfoSubBody }>
<span>username:</span>
<span>{userinfo[0]['username']}</span>
</div>
<div className = { styles.userInfoSubBody }>
<span>number:</span>
{ click_button ? <span>{userinfo[0]['phone']}</span> : <input type="text" value={userinfo[0]['phone']} /> }

<ClickButton name="john" />
</div>
</div>

</div>
);
};
return (
<div>
{ renderList() }
</div>
);
};

function mapStateToProps({ todos }) {
return {
todos: todos,
};
}

export default connect(mapStateToProps)(Userinfo);

Answer

Here's something that actually works (although I removed the todos and such but you can add them in easily):

class RenderList extends React.Component {
  render() {
    return (<span> {this.props.name} </span>);
  }
}

class App extends React.Component {
  render() {
    return (<div>
      <RenderList name="John"/>
    </div>)
  }
}

ReactDOM.render(<App/>,document.getElementById("app"));
Comments