Reactjs Tutorial: Cannot read property 'props' of undefined

Question

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);

You should use classes for your components like this instead of the function syntax. ie,class renderList extends React.Component — mnsr
Reactjs -> react implemented in JS. Reacths -> react implemented in Haskell. Finally! :-) — zerkms
changing to class wont solve the problem, its just the syntax. where are you passing props to renderList? — Harkirat Saluja
I define it as the Class button,and I use the button: <button name = "john">。 — johnbee

KumarM KumarM · Accepted Answer · 2016-08-05T04:05:27

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"));

Reactjs Tutorial: Cannot read property 'props' of undefined

1 Answers