onClick event on stateless components controlling a prop on that Component

Question

I have a stateless component called EmailItem : I want when I click it, I can give it a new prop via some function.

<EmailItem key={i} onClick={// onClick function} emailData={email} read={false} />

I want when the EmailItem is click it changes the read prop to true.

I understand this can be done by making EmailItem a statefull component; however, it is an iterable component and from my understanding adding state where you don't NEED it is bad. Correct me if wrong.

I am confused about the content of the function I would use since e.target and refs will not work.

This read prop will change the class of an item in the stateless component.

const EmailItem = (props) => {
  let readClass = props.emailData.read ? '--read' : ''
  return (
    <div onClick={props.onClick} className='email'>
      <div className={'email__read' + readClass} />
      <div className='email__leftside'>
        <div className='email__from'>{props.emailData.from}</div>
        <div className='email__subject'>{props.emailData.subject}</div>
        <div className={'email__body'}>{props.emailData.body}</div>
      </div>
      <div className='email__rightside'>
        <div className='email__date'>{props.emailData.date}</div>
        <div className='email__time'>{props.emailData.time}</div>
      </div>
    </div>
  )
}

The email__read className is an indicator of whether the email has been read or not

Answer 1

From what I understood, You can pass function(onClick) from parent to child component and bind emaildata to that function. ES6 arrow function syntax takes care of parameter binding and you can get emailData(which was clicked) in parent.

Try out following example(sorry for no css)

class Inbox extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      emails: [
        { read: false, from: "aaa", to: "aaato", subject: "aaasubject", body: "aaabody", date: "aaadate", time: "aaatime" },
        { read: true, from: "bbb", to: "bbbto", subject: "bbbsubject", body: "bbbbody", date: "bbbdate", time: "bbbtime" },
        { read: false, from: "aaa", to: "cccto", subject: "cccsubject", body: "cccbody", date: "cccdate", time: "ccctime" },
        { read: false, from: "ddd", to: "dddto", subject: "dddsubject", body: "dddbody", date: "ddddate", time: "dddtime" },
      ]

    }
  }

  handleClick(index, ele) {
    // ele is emaildata, do anything you want
    var newEmails = this.state.emails

    newEmails[index].read = true
    this.setState({
      emails: newEmails
    })
  }

  render() {
    return (
      <div>
        <p>Emails</p>
        {
          this.state.emails.map((e, i) => {
            return <EmailItem emailData={e} key={i} onClick={() => { this.handleClick(i, e) }} />
          })
        }
      </div>
    )
  }
}


const EmailItem = (props) => {
  let readClass = props.emailData.read ? '--read' : '--unread'
  return (
    <div onClick={props.onClick} className='email'>
      <div className={'email__read' + readClass} />
      <div className='email__leftside'>
        <p>{readClass}</p>
        <div className='email__from'>From {props.emailData.from}</div>
        <div className='email__subject'>To {props.emailData.subject}</div>
        <div className={'email__body'}>Body {props.emailData.body}</div>
      </div>
      <div className='email__rightside'>
        <div className='email__date'>Date {props.emailData.date}</div>
        <div className='email__time'>Time {props.emailData.time}</div>
      </div>

      <p>---------------------</p>
    </div>
  )
}

Answer 2

What you need to do to change your props is to change the state. It doesn't matter that the state doesn't live in this component. You can pass callback from your parent component and than call this callback inside your stateless component and change state in your parent component. Note: State doesn't to be in the parent. It can be higher up. This should help you: https://facebook.github.io/react/docs/lifting-state-up.html

I hope this is helpful for you.

Answer 3

May be this link can help you i jut gave its answer there

How to pass function as props in React?