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
– mnsr, Commented Aug 5, 2016 at 2:28
Reactjs -> react implemented in JS. Reacths -> react implemented in Haskell. Finally! :-) — zerkms
– zerkms, Commented Aug 5, 2016 at 2:57
changing to class wont solve the problem, its just the syntax. where are you passing props to renderList? — Harkirat Saluja
– Harkirat Saluja, Commented Aug 5, 2016 at 7:51
I define it as the Class button,and I use the button: <button name = "john">。 — johnbee
– johnbee, Commented Aug 9, 2016 at 2:13

KumarM · Accepted Answer · 2016-08-05 04:05:27Z

0

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

answered Aug 5, 2016 at 4:05

KumarM

1,6991 gold badge18 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

johnbee Over a year ago

I show the complete code,can you tell me,why I there;s the bug

KumarM Over a year ago

I think you should post the full code. I see that you have edited your post to add some more code, but I doubt it even compiles properly. You are better off posting the full code to get better help.

johnbee Over a year ago

this what i define the clickbutton and use it as a component

Collectives™ on Stack Overflow

Reactjs Tutorial: Cannot read property 'props' of undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related