Pass an array of objects to another component using in react

Question

Is there a way I could pass an array line props to child components in react with <Link to="/abc/results"> - results component need an array from main component to render data. How to do this? there are other discussions around sending a single id - that appends to the url as well - but my question is - is there a way we can send data like an array of n number of object with Link?

Updated: client/index.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from '../components/redux/store';
import App from '../components/app/app';

render((
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>
), document.getElementById('root'));

server.js:

export default function (req, res, next) {
  const store = createStore(reducers, {}, applyMiddleware(thunk));
  let foundPath = null;
  let { path, component } = routes.routes.find(
    ({ path, exact }) => {
      foundPath = matchPath(req.url,
        {
          path,
          exact,
          strict: false
        }
      );
      return foundPath;
    }) || {};
  if (!component) {
    component = {};
  }
  if (!component.fetchData) {
    component.fetchData = () => new Promise((resolve, reject) => resolve());
  }
  component.fetchData({ store, params: (foundPath ? foundPath.params : {}) }).then(() => {
    const state = store.getState();
    const preloadedState = JSON.stringify(state).replace(/</g, '\\u003c');
    const context = {};

    const html = ReactDOMServer.renderToStaticMarkup(
      <Provider store={store} >
        <Router location={req.url} context={context} >
          <App />
        </Router>
      </Provider>
    );

....

 <Link to={{ pathname: '/abc/testing/results', state: { results: resultsArray } }}> Click </Link>

routes: ....

routes: [

      {
          path: '/abc/testing/results',
          component: Results,
          exact: true
        },
{..},
{..},
]

......

Possible duplicate of [Pass props in Link react-router](https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router) — xDreamCoding, Nov 12 '17 at 05:12

score 3 · Answer 1 · answered Nov 12 '17 at 05:18

3

You can use the location object to pass state in React Router V4. Your Link would like

<Link to={{
  pathname: '/abc/results',
  state: { myArrayVariableName: myArrayVariable}
}}/>

More info in the docs

And in Results you would access the value as this.props.location.state.myArrayVariableName

answered Nov 12 '17 at 05:18

palsrealm

5,083
1
20
25

1

https://stackoverflow.com/users/2345964/palsrealm - I have implemented in my code - the link url does not work from the link on the page - If i directly acess the link the page loads? do I have to do anything else - updated my answer - I see the url changes but does not navigate to that page – monkeyjs Nov 12 '17 at 05:41
You need to have a `Route` that handles that path on the page from which you are Routing to Results. A `Link` component will set the URL of your page using the `history` object. Your `Route` would trigger the loading of the desired component when your App navigates to that URL. – palsrealm Nov 12 '17 at 05:47
You need to post more of your router code. looks like the route you have is not being triggered. – palsrealm Nov 12 '17 at 06:00
Ok I am guessing it is because of server side rendering and the way I have the router set up? I have updated my server.js and also routes.js – monkeyjs Nov 12 '17 at 06:05
There is some issue with some part of your code that has not been posted. Refer to https://stackoverflow.com/help/mcve for providing verifiable examples for debugging purposes. – palsrealm Nov 12 '17 at 06:12
https://stackoverflow.com/users/2345964/palsrealm - This is a server side rendering application and I have updated my question with my client index.js file – monkeyjs Nov 12 '17 at 07:25

score 1 · Answer 2 · edited Aug 25 '20 at 09:56

1

//first component
<Link
    to={{
      pathname: `/trainer`,
      state: {
        instructor_id: ["abc","bcd"],
      },
    }}>
    click here
  </Link>
  



//second component to fetch data

console.log(this.props.history.location.state.instructor_id);

edited Aug 25 '20 at 09:56

Adriaan

17,741
7
42
75

answered Aug 25 '20 at 09:44

JHM16

649
8
12

Pass an array of objects to another component using in react

2 Answers2