How to pass props between two not-related and stateless component in React?

Question

As title said, i'm try to find a way to pass my props from one component to anotehr taht are not related between each others. The only thing that related them is a link:

const ConversationPreview = (props) => {
  var people = props.people;
  const messages = props.messages;

  const conversationName = people.map(person => {

    // Filter message from conversation's sender
    function filterMessageBySender(obj){
      if ('from' in obj && obj.from === person.nickname) {
        return true;
      }
    }

    const messagesByCurrentSender = messages.filter(filterMessageBySender);
    const lastMsg = messagesByCurrentSender[messagesByCurrentSender.length - 1]

    function passProps() {
      return <Conversation people={people} />
    }

    return (
      <li key={person.id}>
        <Link to={`/${person.nickname}`} onClick={passProps}>
          <Avatar image={person.pic} />
          {person.nickname}
          <p> {lastMsg.body} </p>
        </Link>
      </li>
    )
  });

  return (
    <ul>
      {conversationName}
      {props.children}
    </ul>

  )
};

And this is the component that should receive the people props:

const Conversation = (props) => {

  console.log(props);
  //console.log(people);

  function findConversationPerson(person){
    return person.nickname === props.params.conversation
  }
  const currentPerson = peopleOld.find(findConversationPerson); 


  return (
    <div>
      <header>
        <Avatar image={currentPerson.pic} />
        <h1> {props.params.conversation} </h1>
      </header>
      <main>
        <MessagesList sender={currentPerson}/>
      </main>
    </div>
  )
};

Is there a(good) way or should I re-think the whole way i structured the app?

What is your structure? ie do the components have the same parent/s etc...? — Ori Drori, Apr 20 '16 at 14:35
No, any parent in common is a simple chat app with structure similar to whatzapp: 1_ ConversationsLIst 1a_ConversationsPreview 2_Conversation 2a_ConversationName 2b_... i need to send some info to Conversation. They can come from ConversationsList or ConversationsPreview. — Giorgia Sambrotta, Apr 20 '16 at 14:48
Try this from the other post , http://stackoverflow.com/questions/30115324/pass-props-in-link-react-router — Jackie Huang, Apr 20 '16 at 14:52
@ZekeDroid i'm learning now Reac, i feel i stil have to experiement with it before enter in the magic world of Redux :) — Giorgia Sambrotta, Apr 20 '16 at 15:14
@GiorgiaSambrotta you are already making the right steps by making the component stateless(using props). Learning redux is simple and will give you the functionality you are looking for by having both components reading the global state tree and both will then immediately update on state changes. It is possible to setup redux just for static data and not implement actions that way you have global state and can expand to data manipulation as you go forward. — kwelch, Apr 20 '16 at 15:31
@JackieHuang thank you for the link, the soloution could have been great if we they will just have keep it in react-router v2 API, but they didn't :( And for how tehy change it know, using that technique will result in a quite dirty solution, i believe — Giorgia Sambrotta, Apr 26 '16 at 14:19

score 0 · Answer 1 · answered Apr 26 '16 at 14:17

After lot of resource i discover this is quite a common problem and is mostly related to react-router. The problem is that usually in react we pass props inside the component which have to be explicitly defined in the render func. But sometimes we don't want to render them directly and maybe the router take care about when and where render them. So how to pass props?

A way to do it is to clone the children with the passed data. So, in your App render function you will have:

{React.cloneElement(this.props.children, {dataChildrenNeeded: this.props.parentsData})}

So all your children will have same props. And they can easily be access by doing:

this.props.dataChildrenNeeded

This will work with state or whateverlse you want to pass.

For better explanation and further reading here are my main sources:

Stackoverflow: React router and this.props.children

react-router github issue #1857

How to pass props between two not-related and stateless component in React?

1 Answers1