Sunday, 20 January 2019
javascript - How to pass props/state through Link and Route - react.js
Answer
Answer
I'm in the middle of creating my first web app made with react.js (create-react-app and react-router 3.0.2, no redux) and i've encountered a problem with passing a property through the Link and Route (i'm not sure if what i'm trying to do is a correct approach in "react way" of making an app)
Idea is that AddCost component (which im not pasting since it's irrelevant) should render a little bit different depending on a property passed onto it. However i'm not sure how to do it (and if it's even possible that way)
Index.js is the main rendering component, App.js is the main container and div with className='content' is where i want to {Home} and {AddCost} to render interchangeably (when i clink on one of the links in {Home} i want to {AddCost} render in the same place as {Home} was rendered before (and that works) but i cant get to pass a prop to the {AddCost} component depending on which of the links i click)
So the main questions is as in title, how to pass information from {Home} to {AddCost} when react-router is used for routing?
//Index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import Home from './components/Home'
import Stats from './components/Stats'
import Account from './components/Account'
import AddCost from './components/AddCost'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import './index.css'
ReactDOM.render(
(
document.getElementById('root')
)
//App.js
import React, { Component } from 'react'
import './App.css'
import Header from './Header'
class App extends Component {
constructor(props) {
super(props)
this.state = {
costType: null
}
}
render() {
return (
{this.props.children}
)
}
}
export default App
//Home.js
import React, { Component } from 'react'
import { Link } from 'react-router'
import './Home.css'
class Home extends Component {
render() {
const costTypes = [
{ text: 'Health', icon: 'fa fa-heart' },
{ text: 'Bills', icon: 'fa fa-home' },
{ text: 'Gas', icon: 'fa fa-car' },
{ text: 'Vacation', icon: 'fa fa-plane' },
{ text: 'Lunch', icon: 'fa fa-coffee' },
{ text: 'Groceries', icon: 'fa fa-shopping-cart' },
{ text: 'Leisure', icon: 'fa fa-glass' },
{ text: 'Leisure', icon: 'fa fa-glass' },
]
const listItems = costTypes.map((type, i) => (
{type.text}
))
return (
{listItems}
)
}
}
export default HomeAdditionally i'll gladly accept information about any major mistakes or bad practice examples.
Answer
You have several options here. One of them is to use route params.
1) First you need to change path attribute of your route
2) Inside your AddCost comonent you can get type as this.props.params.type and decide what to render
class AddCost extends React.Component {
render() {
console.log(this.props.params.type)
}
}3) Finaly use another to attribute in your links
php - file_get_contents shows unexpected output while reading a file
I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print ...
No comments:
Post a Comment