CODEWITHSUNDEEP
ecmascript-6reactjsjsx
teddybear123
teddybear123

Reputation: 2424

ReactJS ES6 adding logic to the component

I have a chat feature and I'm trying to display an array of messages into my JSX code with a conditionally rendered className depending on a value in an object.

I'm really new to ES6 and React and I cannot figure how to go about this logic inside the JSX. I am using redux to map my state into props. For brevity, I've cut the code into its simplest form.

class ChatWidget extends Component {

  render() {
    return (
      <div className={chat.body}>
        {/* if from_id == 1 */}
        <div className={chat.float-right}>
            <p>  {/* message of from_id==1 */} </p>            
        </div>
        {/* else */}
        <div className={chat.float-left}>
            <p> {/* else message here */} </p>               
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    messages: state.messages
  };
}

Here is my sample JSON array.

[
        {   
            msg_id: 1,
            to_id: 1,
            from_id: 2,
            message_id: "Marzipan jelly-o croissanty"
        },
        {   
            msg_id: 2,
            to_id: 2,
            from_id: 1,
            message_id: "Jelly sw"
        }
]

Upvotes: 0

Views: 101

Answers (1)

Pineda
Pineda

Reputation: 7593

You can use your messages array to create an array of JSX elements which can be used in another JSX expression for rendering.

Since you want the message with from_id == 1 to appear first you can use Array#sort to order the messages array
(to avoid mutating messages a shallow copy of the array is made using Array#slice).

You then then call Array#map on the newly returned array to iterate through the sorted messages creating new JSX on each iteration.

The code could look something like this:

class ChatWidget extends Component {

  render() {
    // deconstruct messages from props
    const {messages} = this.props;

    // Mutating data should be avoided and Array#sort mutates 
    // the array so we use Array#slice to create a 
    // shallow copy before we sort it
    const msgCopy = messages.slice();

    // sort messages so message where from_id === 1 is first
    const sorted = msgCopy.sort((a,b) => {
      return a.from_id - b.from_id;
    });

    // iterate through sorted array to create 
    // an array JSX elements
    sorted.map(message => {
      const {from_id, message_id} = message;

      // Change class if from_id is 1
      const classToAdd = (from_id === 1) ? ('chat.convo + ' ' + chat.them'):('chat.convo');

      return (
        <div className={classToAdd}>
          <div className={chat.text}>
            <p>  { message_id } </p>            
          </div>
        </div>
      );
    });

    // use sorted array as follows to create a div containing
    // a child div for each message
    return
    (
      <div className={chat.body}>
        {sorted}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    messages: state.messages
  };
}

Upvotes: 1

Related Questions