Passing data in Reactjs using material UI

Question

Thanks in advance for any help.

I am developing a web application that uses Reactjs and material-UI to display energy use data for multiple farms.

I wish to click a button on the main page and that takes me to another page for an individual farm to view its data.

Here is the code, which uses the NavLink component to redirect the page:

{/*Farm B*/}
        <GridItem xs={12} sm={6} md={3}>
          <Card>
            <CardHeader
              color="danger"
              stats
              icon
              sensorValue="43.27"
              cardName="Farm B"
            >
              <CardIcon color="primary">
                <SvgIcon
                  component={BarnIcon}
                  viewBox="0 0 980.000000 980.000000"
                />
              </CardIcon>
            </CardHeader>
            <CardFooter stats>
              **<NavLink to="/admin/dashboard" activeClassName="selected">**
                GO
              </NavLink>
            </CardFooter>
          </Card>
        </GridItem>

From here, when it lands on the requested page i.e., for farm B, how do I send a string as a variable to the second page so that instead of having X number of individual pages for individual farms, I can simply specify a variable - say 'A' or 'B' etc and it loads the same page with dynamic data.

Thanks.

in short, you want to send some data to the /admin/dashboard? — Nisharg Shah
– Nisharg Shah, Commented Nov 5, 2020 at 14:06
I think using url would be the best to do that. But using a query parameter ('/admin/dashboard?farm=A') or url itself (/admin/dashboard/A/) is your decision. — acbay
– acbay, Commented Nov 5, 2020 at 14:11
@acbay would that mean I would still need individual scripts for each of the farms and supply a query parameter for each one? — bezbmw
– bezbmw, Commented Nov 5, 2020 at 14:48
no. you can reach query parameter or or url match parameters from your component. — acbay
– acbay, Commented Nov 5, 2020 at 15:12

Nisharg Shah · Accepted Answer · 2020-11-05 14:16:29Z

1

You can do something like that

<Navlink 
    to={{
       pathname: '/admin/dashboard/'
       someString: 'hello world'
    }}
>Go</Navlink>

access it with props.location.someString

answered Nov 5, 2020 at 14:16

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

bezbmw Over a year ago

Thanks, but that doesnt seem to work here is the error:TypeError: Cannot read property 'props' of undefined Dashboard C:/xampp/htdocs/material-dashboard-react-master/src/views/Dashboard/Dashboard_farm1.js:47 44 | stats 45 | icon 46 | sensorValue="28.93" > 47 | cardName={this.props.location.name} | ^ 48 | > 49 | <CardIcon color="info"> 50 | <SvgIcon

bezbmw Over a year ago

its as if the variable is not getting to the second page...

Nisharg Shah Over a year ago

please specify props in your dashboard component

Nisharg Shah Over a year ago

const Dashboard = (props) => {} or class Dashboard extends React.component {}, for functional component ( props ) and for class based ( this.props )

bezbmw Over a year ago

thanks again. If I were to add the "Dashboard extends React,Component{}", I already have the constructor: "export default function Dashboard() {}". So how would I handle that?

|

harisu · Accepted Answer · 2020-11-05 15:34:09Z

You can accomplish this by simply either define and passing a path variable that its dynamic to the /admin/dashboard URL ie you will need to do

<NavLink to=`/admin/dashboard/stringtopass` activeClassName="selected">

And with this you will also need to modify the route listening for that URL to accept a path variable to be of the form

 <Route path='/admin/dashboard/:pathvairable' exact component={Dashboard} />

If your Dashboard component which you want to use the sent variable in is written using hooks you will simply need to do let { pathvairable } = useParams(); supposing you had the line import { useParams } from 'react-router-dom' in your imports

However if you are dealing with normal classical components, You will need to get the variable using this.props.match.params.pathvairable

You will be able to read more NavLink

Fahad Shinwari · Accepted Answer · 2020-11-05 17:33:15Z

0

You can use this it works best.

//First Create Route Path
<Route path="/items/:itemId" component={Items} / >

// your link creation

const newTo = { 
  pathname: "/admin/dashboard", 
  String: 'hello bro' 
};
      <CardFooter stats>
          <NavLink to={newTo} activeClassName="selected">
            GO
          </NavLink>
        </CardFooter>

// In your CardFooter Component, you can access the data like this

this.props.match.params.itemId // this is items id 
this.props.location.String// this is Par1

answered Nov 5, 2020 at 17:33

Fahad Shinwari

9668 silver badges7 bronze badges

Collectives™ on Stack Overflow

Passing data in Reactjs using material UI

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related