How to call a method inside a react material-ui components

Question

i'm implementing a chat system with a functionality of adding emojis. for that i've created a function that returns a component along with the text and image.

the function ive used

 test: function(item1) {
    var texts = item1.message.split(/:\)/g);
    console.log(texts);
    var content = [];
    for(var i = 0; i < texts.length - 1; i++) {
        content.push(texts[i]);
      content.push(<img src={Emojis[0].uri}/>);
    }
    return content.map(function(emoji) {
      return (<span> {emoji} </span>)
    })
  },

for this chat i'm using socketio and node express. and the message returned is displayed on a react component. the "threads" jason contains the all received messages (keys inside threads are message,user1). now what i want is to call the above test function inside secondaryText and pass the {item.message} as parameter. but when ever it runs it says "Uncaught ReferenceError: test is not defined".

  <div>
      {

        this.state.threads.map(function(item) {

            return (<ListItem
                leftAvatar={<Avatar src="profile pic" />}
                primaryText={item.user1}
                secondaryText={test({item})}
                secondaryTextLines={2}
            />
            );

        })
      }
        </div>

the whole react component

    const Threads = React.createClass({

  getInitialState: function() {
    return {
        threads: ThreadStore.getmessages()
    }
  },

  userlistio:function(){
      console.log(" awooooo");
    socket.on('chatList',function(data){
        console.log(data.Userlist+" awa!");
    }.bind(this));
 },

    componentDidMount: function () {
        ThreadStore.addChangeListener(this._onChange);

    },
    _onChange: function () {
        this.setState({
            threads: ThreadStore.getmessages()
        });

    },
  socketio: function() {

    socket.on('chat', function (data) {
      console.log(data.message);
        console.log(data.user2);
      this.setState({threads: data.message});
    }.bind(this));
  },
  _sendmessage: function() {
      let message = this.refs.message2.value;
      let User2 = this.refs.message1.value;
      let Eml = LoginStore.getEmail();
    let chat = {
        message: message,
        user1: User1,
        user2: User2,
        emailusr1: Eml
    }
    console.log('Emiting ...');
    socket.emit('message', chat);
    console.log('Done ...');

  },
  test: function(item1) {
    var item = {
        message: ':) hello :) hello :) hello :)'
    }
    console.log("smilies working");
    var texts = item1.message.split(/:\)/g);
    console.log(texts);
    var content = [];
    for(var i = 0; i < texts.length - 1; i++) {
        content.push(texts[i]);
      content.push(<img src={Emojis[0].uri}/>);
    }
    return content.map(function(emoji) {
      return (<span> {emoji} </span>)
    })
  },
  render: function() {
    return (
      <Paper zDepth={1} style={Sty1}>
        {this.userlistio()}
        {this.socketio()}
        <CardTitle title="Threads" subtitle="" />
        <CardText>
          Message threads
            <div>
          {

            this.state.threads.map(function(item) {

                return (<ListItem
                    leftAvatar={<Avatar src="profile pic" />}
                    primaryText={item.user1}
                    secondaryText={test({item})}
                    secondaryTextLines={2}
                />
                );

            })
          }
            </div>
            <Paper style={Sty2} >
                <input type="text" ref="message1" />
                <input type="text" ref="message2" />
          <input type="button" onClick={this._sendmessage} value="Send message" />
            </Paper>



        </CardText>
        <CardActions>

        </CardActions>
        </Paper>
    );
  }

});

Answer 1

Change your this.state.threads.map to:

    //es6
    this.state.threads.map(item => { //use arrow functions in es6 for this binding/readability
        return (
          <ListItem
            leftAvatar={<Avatar src="profile pic" />}
            primaryText={item.user1}
            secondaryText={this.test(item)} //changed item here to be the item as opposed to a new object of { item: item } as in your previous code.
            secondaryTextLines={2}
          />
      );
    })

    //es5
    this.state.threads.map(function(item) { //use arrow functions in es6 for this binding/readability
        return (
          <ListItem
            leftAvatar={<Avatar src="profile pic" />}
            primaryText={item.user1}
            secondaryText={this.test(item)} //changed item here to be the item as opposed to a new object of { item: item } as in your previous code.
            secondaryTextLines={2}
          />
      );
    }.bind(this))