how to insert data to bootstrap table from redux store in react.js?

Question

I have data (array) in redux store. I have created actions and reducer for it but how can I display data that is already stored in redux store to my bootstrap table ?

my functional component that has table :

const Contacts = function () {

 
    return (
        <div>
        <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          </tbody>
      </table>
        </div>
    )
}

my redux store:

import {createStore} from 'redux' import {composeWithDevTools} from 'redux-devtools-extension'

const initialState = {

contacts:[

    {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "[email protected]",
        "address": {
          "street": "Kulas Light",
          "suite": "Apt. 556",
          "city": "Gwenborough",
          "zipcode": "92998-3874",
          "geo": {
            "lat": "-37.3159",
            "lng": "81.1496"
          }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
          "name": "Romaguera-Crona",
          "catchPhrase": "Multi-layered client-server neural-net",
          "bs": "harness real-time e-markets"
        }
      },
      {
        "id": 2,
        "name": "Ervin Howell",
        "username": "Antonette",
        "email": "[email protected]",
        "address": {
          "street": "Victor Plains",
          "suite": "Suite 879",
          "city": "Wisokyburgh",
          "zipcode": "90566-7771",
          "geo": {
            "lat": "-43.9509",
            "lng": "-34.4618"
          }
        },
        "phone": "010-692-6593 x09125",
        "website": "anastasia.net",
        "company": {
          "name": "Deckow-Crist",
          "catchPhrase": "Proactive didactic contingency",
          "bs": "synergize scalable supply-chains"
        }
      },
      {
        "id": 3,
        "name": "Clementine Bauch",
        "username": "Samantha",
        "email": "[email protected]",
        "address": {
          "street": "Douglas Extension",
          "suite": "Suite 847",
          "city": "McKenziehaven",
          "zipcode": "59590-4157",
          "geo": {
            "lat": "-68.6102",
            "lng": "-47.0653"
          }
        },
        "phone": "1-463-123-4447",
        "website": "ramiro.info",
        "company": {
          "name": "Romaguera-Jacobson",
          "catchPhrase": "Face to face bifurcated interface",
          "bs": "e-enable strategic applications"
        }
      },
      {
        "id": 4,
        "name": "Patricia Lebsack",
        "username": "Karianne",
        "email": "[email protected]",
        "address": {
          "street": "Hoeger Mall",
          "suite": "Apt. 692",
          "city": "South Elvis",
          "zipcode": "53919-4257",
          "geo": {
            "lat": "29.4572",
            "lng": "-164.2990"
          }
        },
        "phone": "493-170-9623 x156",
        "website": "kale.biz",
        "company": {
          "name": "Robel-Corkery",
          "catchPhrase": "Multi-tiered zero tolerance productivity",
          "bs": "transition cutting-edge web services"
        }
      }


] }


       const contactReducer =(state=initialState,action)=> {
       switch(action.type){

      default:
return state;

       }

       }

     const store=createStore(contactReducer,composeWithDevTools())

      export default store;

loop your data with jsx

Nisharg Shah
– Nisharg Shah

2021-02-02 11:19:59 +00:00
Commented Feb 2, 2021 at 11:19 — Nisharg Shah
– Nisharg Shah, Commented Feb 2, 2021 at 11:19

ttt · Accepted Answer · 2021-02-02 11:49:25Z

0

You can use the react-redux and get the state. You can check the example here

import { useSelector } from 'react-redux'


const Contacts = function () {
     //choose your reducer from store
     const data = useSelector(state => state.yourReducerName)

     //data for use
     <tbody>
         {data.map(contact => (
            <tr>
             <th scope="row">{contact.id}</th>
             <td>{contact.name}</td>
             <td>{contact.username}</td>
             <td>{contact.email}</td>
            </tr>
         ))}
       </tbody>
}

edited Feb 2, 2021 at 11:49

answered Feb 2, 2021 at 11:21

ttt

1,8091 gold badge12 silver badges26 bronze badges

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

2 Comments

Tips and Tricks Of Chess Over a year ago

and then how do i insert that data into rows and columns ?

ttt Over a year ago

@TipsandTricksOfChess I have updated the answer. The trick is you need to select your own reducer in the useSelector function. Then you can use the map function to loop through the array

Hamza Olak · Accepted Answer · 2021-02-02 11:28:50Z

0

If you have data in redux store you can use like this:

    import { connect } from 'react-redux';

    const Contacts = function ({contacts}) {

 
    return (
        <div>
        <table class="table table-dark">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
         {contacts.map(element => (
          <tr>
            <th scope="row">{element.id}</th>
            <td>{element.name}</td>
            <td>{element.username}</td>
            <td>{element.email}</td>
          </tr>
         ))}
       </tbody>
    
      </table>
        </div>
    )
   }

   function mapStateToProps(state) {
     return {
       contacts: state.contacts //get store data 
    };
  }

  export default connect(mapStateToProps, null)(AccountMenu)

edited Feb 2, 2021 at 11:28

answered Feb 2, 2021 at 11:26

Hamza Olak

112 bronze badges

1 Comment

Tips and Tricks Of Chess Over a year ago

tsecheukfung01 is saying to use hooks .... hooks allow you to subscribe to the Redux store and dispatch actions, without having to wrap your components in connect().

Collectives™ on Stack Overflow

how to insert data to bootstrap table from redux store in react.js?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related