How to share a list from one component to another one?

Question

App.jsx module:

import React from 'react';
import './App.css';
import {Route,Switch} from 'react-router-dom';
import Conduct from './extras/conduct';
import Vote from './extras/vote';
import Menu from './menu';
function App() {
  return (
    <div className="App">
        <Menu/>
        <Switch>
          <Route exact path="/" component={Conduct}/>
          <Route path="/vote" component={Vote}/>
        </Switch>      
    </div>
  );
}

export default App;

Conduct.jsx module:

import React, {Component} from 'react';
import './Conduct.css';
import Election from './election';
class Conduct extends Component{
    constructor(props){
        super(props);
        this.state={
            owner:'',
            elename:'',
            newCandidate:'',
            Candidateslen:'0',
            addaddress:'',
            candName:[]
        }
    }
}

Vote.jsx module

import React, {Component} from 'react';

class Vote extends Component{
    render(){
        return(
            <h2>you can vote here</h2>
        );
    }
}

export default Vote;

I come up with serious issue in my react.js code please help me. The state.candName is a state list in Conduct.jsx module and now i want to use this list elements in Vote.jsx module. How to do that.

The better way is to use redux in your project for store and use your states, changing candName in Conduct.jsx you can get an update in Vote.jsx — Babak Yaghoobi, Jan 20 '21 at 11:14
you can check the following answer https://stackoverflow.com/questions/65785994/how-to-share-data-from-one-react-native-component-to-another-component/65786436#65786436 — S.N.B, Jan 20 '21 at 14:15

score 1 · Answer 1 · answered Jan 20 '21 at 14:01

Use Redux as central store, where every component can access that data for you.

How redux helps you? Redux will help your to store your Conduct.jsx data in central store where data will be available to the all of your components with help of connect method from react-redux. You should study it how to use redux with React, It will help you a lot in this issues and for sure in future also.

Thanks

score 0 · Answer 2 · answered Jan 20 '21 at 13:59

0

You can use a state management library like redux to manage the central data store for all app data which can be accessed by any component. For more, please have a look into the official documentation https://react-redux.js.org/

answered Jan 20 '21 at 13:59

Ehtesham Ahmad Nadim

412
5
14

Okay. Thank you so much – piyush shende Jan 20 '21 at 14:14

How to share a list from one component to another one?

2 Answers2