CODEWITHSUNDEEP
reactjsreact-router
Paras
Paras

Reputation: 63

How to pass state and props from app.js to other files?

I am a beginner, I just started learning react few days back. i want to create 2 pages that is friendlist which displays friend list in table form which has all the fields and each field has an edit button.Clicking edit button should go to edit page. where user should be able to edit details. Can any one please help me to do these 2 pages.

Upvotes: 1

Views: 4280

Answers (2)

Rokas
Rokas

Reputation: 1712

In App.js, pass data as prop

render() {
   return <Route data={this.state.data}/>
 }

Then in Route.js you can get all props and pass it to components

const Router = (props) => (
  <HashRouter>
    <div>
      <Route exact path="/" render={() => <list data={props.data}/>}/>
    </div>
  </HashRouter>
)

Upvotes: 3

Shubham Khatri
Shubham Khatri

Reputation: 281646

You need to make use of React-redux to share your application data and change the Route to get a parameter to show a specific friend on Edit page

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, connect} from 'react-redux';
import {createStore} from 'redux';
import {BrowserRouter as Router, Route} from 'react-router-dom'
import reducers from './reducers'
import FriendList from './containers/FriendList'
import EditFriend from './containers/EditFriend'
const store = createStore(reducers);

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <div>
                <Route exact path="/" component={FriendList}/>
                <Route path="/edit/:friendId" component={EditFriend}/>
            </div>
        </Router>
    </Provider>,
    document.getElementById('container')
)

FriendList.js

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions';
import {Link} from 'react-router-dom';

class FriendList extends React.Component {

   constructor(props) {
      super(props);

   };

   render() {
      console.log(this.props.friendsInfo.data);
        return (
            <div>
                <table>
                    <thead>
                        <tr>
                            <td>Name</td>
                            <td>Phone No.</td>
                            <td>Email</td>
                            <td>Work</td>
                            <td>City</td>
                            <td>Edit</td>
                        </tr>
                    </thead>
                    <tbody>
                    {this.props.friendsInfo && this.props.friendsInfo.data.map((data) => {
                        console.log(data)
                        return(
                            <tr key={data.key}>
                                <td>{data.name}</td>
                                <td>{data.phone}</td>
                                <td>{data.email}</td>
                                <td>{data.work}</td>
                                <td>{data.city}</td>
                                <td><Link to={`/edit/${data.key}`}>Edit</Link></td>
                            </tr>
                        )
                    })} 
                    </tbody>
                </table>
            </div>
        )
     }
}

function mapStateToProps(state) {
    return {
        friendsInfo: state.FriendList
    }
}

export default connect(mapStateToProps)(FriendList);

FriendListReducer

const initialState =  {
    data: [ {
      key:1,
      name: "Steve",
      phone: "03974645875",
      email: "[email protected]",
      work:"Engg",
      city:"NY"
    }
    ,{
      key:2,
      name: "Stella",
      phone: "04424645875",
      email: "[email protected]",
      work:"Architect",
      city:"NY"
    },{
      key:3,
      name: "Leo",
      phone: "68546855875",
      email: "[email protected]",
      work:"Engg",
      city:"NY"
    },{
      key:4,
      name: "RK",
      phone: "67544645875",
      email: "rkgmail.com",
      work:"Engg",
      city:"NY"
    }]
}

const FriendList = (state=initialState, action) => {
    switch(action) {
        case "EDIT_FRIEND_DATA": 
            return state
        default: 
            return state
    }
}

export default FriendList;

EditFriend.js

import React from 'react';
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux';
import * as actions from '../actions';
class EditFriend extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        console.log(this.props);
        return (
            <div>Hello {this.props.match.params.friendId}</div>
        )
    }
}
function mapStateToProps(state) {
    return {
        friendsInfo: state.FriendList
    }
}
function mapDispatchToProps(dispatch) {
    return {
        editFriend: bindActionCreators(actions, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(EditFriend);

Read the following blog to get started with redux guide: scotch.io/bar-talk/getting-started-with-redux-an-intro

Visit Github for a complete working code

Upvotes: 1

Related Questions