I am trying to post some data of an object when i click on "show's button". So i want to keep its id. So i used this code in my container:
import {connect} from "react-redux";
import ShortcutCard from "./ShortcutCard";
const mapStateToProps = (state,ownProps) => {
let id = ownProps.match.params.id;
return{
shortcut : state.raccourcis.shortcuts.find(shortcut => shortcut.id ===id)
}
}
const mapDispatchToProps = dispatch => ({
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(ShortcutCard);
**and this one like a component(in an other file) :**
import React, {Component} from 'react';
import './ShortcutCard.scss';
import {Link, Route} from "react-router-dom";
class ShortcutCard extends Component {
render() {
const {shortcut} = this.props;
return (
<div className="col mb-4 cardContainer">
<div className="card">
<div className="card-body">
<h2 className="card-title">{shortcut.title}</h2>
<p className="card-text">{shortcut.context}</p>
<img src={process.env.REACT_APP_UPLOADS_DIR + '/' + shortcut.software.logo} className="card-img-top" alt={shortcut.software.name}/>
<Link to={'/Excerpts/' + shortcut.id} >
<button>shows</button>
</Link>
</div>
</div>
</div>
);
}
}
export default ShortcutCard;
I dont know i got an error. "paramas undefined"
PS: i am a newbie on react and redux.
Related
Trying to share the state between 2 components so the dashboard and the displayed component can change states simultaneously. Exmp: Switch from dashboard view to application view and display application component. Problem: I can't wrap my head around what I'm missing here and why the state does not work on my dashboard component.
Redux Slice:
import { createSlice } from '#reduxjs/toolkit';
const initialState = {
selector: 0,
};
export const dashboardSlice = createSlice({
name: 'mainDashState',
initialState,
reducers: {
setSelector: (state, action) => {
state.selector = action.payload;
},
},
});
export const { setSelector } = dashboardSlice.actions;
export default dashboardSlice.reducer;
Redux Store:
import { configureStore } from "#reduxjs/toolkit";
import mainDashSlice from './slices/mainDashSlice';
export const store = configureStore({
reducer: {
mainDashState: mainDashSlice,
},
})
Dashboard.jsx:
import { React } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import '../../css/SideBar.css';
import { UilSignOutAlt } from '#iconscout/react-unicons';
import Logo from '../../../../assets/img/companyLogo.jpg';
import { SidebarData } from '../../Data/Data';
import { setSelector } from '../../../../features/redux/slices/mainDashSlice';
// import Applications from '../applicationsTab/Applications';
function SideBar() {
const selector = useSelector((state) => state.selector);
const dispatch = useDispatch();
console.log(selector);
return (
<div className="Sidebar">
{/* logo */}
<div className="logo">
<img src={Logo} alt="logo" />
<span>Company Name</span>
</div>
{/* menu */}
<div className="menu">
{SidebarData.map((item, index) => (
/* eslint-disable */
<div
role="menu"
className={selector === index ? 'menuItem active' : 'menuItem'}
key={index}
onClick={() => dispatch(setSelector(selector))}
onKeyDown={() => dispatch(setSelector(selector))}
>
<item.icon />
<span>{item.heading}</span>
</div>
))}
<div className="menuItem">
<UilSignOutAlt />
</div>
</div>
</div>
);
}
export default SideBar;
TL;DR:
When clicking on the dashboard "Application" change the state in redux for another component as well to re-render the main tab.
Thanks guys! Do need to understand what I'm doing wrong...
I'm trying to use useState in functional component in react framework. But I am getting this error. What would be the reason?
App.js
import useState from 'react';
import Header from './components/Header';
import TodoList from './components/TodoList';
import Form from './components/Form';
function App() {
const [todos, setTodos] = useState({ id: 1, todo: "Todo1" }, { id: 2, todo: "Todo2" });
return (
<div className="row justify-content-center">
<div className="col-lg-6 col-md-7 col-9">
<Header />
<Form onClick={() => setTodos()} />
<TodoList todos={todos} />
</div>
</div>
);
}
export default App;
TodoList.js:
import ListItem from './TodoListItem';
export default function TodoList(props) {
return (
<div>
{props.todos.map((todo) => <ListItem todo={todo} />)}
</div>
)
}
TodoListItem.js
import styles from '../sass/todoListItem.module.scss';
export default function TodoListItem({ todo }) {
return (
<div className={`card ${styles.title}`}>
{todo}
</div>
)
}
This is because useState is not the default export from the react package.
To import specific modules from a package you should use the curly brace syntax. Try using import { useState } from 'react';
More information on import syntax can be found here
I am having an issue with getting the data from my state I need the information from the employee state to display the pages in referring to are Employee.js and EmployeeItem.js in my repo.
I can map through the state and display a number of blank objects based on how many entries are in the state but I am having trouble displaying and information for the individual objects
How the page currently renders
How I need the page to render
Employee.js
import React, {Fragment, useEffect} from 'react'
import {Link} from 'react-router-dom'
import {connect} from 'react-redux'
import Spinner from '../../layout/Spinner'
import {getEmployees} from '../../../actions/employee'
import EmployeeItem from './EmployeeItem'
import PropTypes from 'prop-types'
const Employees = ({ getEmployees, employee: {employees, loading}}) => {
useEffect(() => {
getEmployees()
}, [])
return (
<Fragment>
{loading ? <Spinner/> :
<Fragment>
<section className="content bg-light">
<h1 className="x-large text-primary title">Employees</h1>
<div className="add">
<Link to="/employees/new"><i className="fas fa-plus-circle text-primary x-large"></i></Link>
</div>
{employees.length > 0 ? (
employees.map(employee => (
<EmployeeItem key={employee._id} profile={employee} />
))
) : <h4>No Employees Found....</h4>}
</section>
</Fragment>
}
</Fragment>
)
}
Employees.propTypes = {
getEmployees: PropTypes.func.isRequired,
employee: PropTypes.object.isRequired,
}
const mapStateToProps = state => ({
employee: state.employee
})
export default connect(mapStateToProps, {getEmployees})(Employees)
EmployeeItem.js
import React from 'react'
import {Link} from 'react-router-dom'
import PropTypes from 'prop-types'
const EmployeeItem = ({employee: name, employement, _id}) => {
return (
<div className="employee-container">
<Link to={`/employees/${_id}`}>
<div className="employee-icon bg-white">
<div className="circle-sal">
<h4 className="large initials">J D</h4>
</div>
<p className="lead-2">{name}</p>
</div>
</Link>
</div>
)
}
EmployeeItem.propTypes = {
employee: PropTypes.object.isRequired,
}
export default EmployeeItem
[What is in the state:
Any help on fixing this would be much appreciated.
If you look at the EmployeeItem. You are assigning employee value to profile prop.
<EmployeeItem key={employee._id} profile={employee} />
and you are trying to access the value wrongly.
const EmployeeItem = ({employee: name, employement, _id}) => {
}
You could have done either this way
<EmployeeItem key={employee._id} profile={employee} />
and in EmployeeItem
const EmployeeItem = ({ profile: { name, _id } }) => {
}
or
<EmployeeItem key={employee._id} {...employee} />
and in EmployeeItem
const EmployeeItem = ({ name, _id }) => {
}
I'm setting up my app with redux, and i'm new to it. I want to make onClick() event to take item's id but im getting error.
I searched a lot of answers here, but they didn't help me a lot.
Documentation says, that i'm not connecting my action right, but I found no good explanation, only example with toDo, which is not enough for me.
Products.js(where I want my onClick())
import React, { Component } from "react";
import Navbar from "../navbar/Navbar";
import Product from "../lists/Product";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getItems } from "../../actions/getItems";
import { getDetails } from "../../actions/getDetails";
class Products extends Component {
componentDidMount() {
this.props.getItems();
}
render() {
return (
<div className="container-fluid products">
<Navbar />
<div className="container">
<h1 className="title display-3 text-center pt-2">
<b>Our Products</b>
</h1>
<div className="underline" />
<div className="py-5">
<div className="container">
<div className="row">
{this.props.shopItems.items.map(item => {
return (
<div
onClick={() =>this.props.getDetails(item.id)}
className="col-lg-3 col-md-6 col-sm-6 col-xs-9"
key={item.id}
>
<div className="card-deck">
<Product
name={item.name}
brand={item.brand}
img={item.img}
price={item.price}
/>
</div>
</div>
);
})}
</div>
</div>
</div>
</div>
</div>
);
}
}
Products.propTypes = {
shopItems: PropTypes.object.isRequired,
getDetails:PropTypes.func.isRequired
};
const mapStateToProps = state => ({
shopItems: state.shopItems
});
export default connect(
mapStateToProps,
{ getItems }
)(Products);
getDetails.js
import {SHOW_DETAILS} from './types';
import {data} from '../data/data';
export const getDetails = id => dispatch =>{
const detailProduct = data.find(item => item.id === id)
dispatch({
type:SHOW_DETAILS,
payload:detailProduct
})
}
detailsReducer.js
import { SHOW_DETAILS } from "../actions/types";
const initialState = {
detailProduct: {}
};
export default (state = initialState, action) => {
switch (action.type) {
case SHOW_DETAILS:
return {
detailProduct: action.payload
};
default:
return state;
}
};
index.js(root reducer)
import {combineReducers} from 'redux'
import itemsReducer from './itemsReducer'
import detailsReducer from './detailsReducer';
export default combineReducers({
shopItems:itemsReducer,
detailProduct:detailsReducer
})
Store.js
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from './reducers/index';
const initialState = {};
const middleware = [thunk];
let store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
);
export default store;
I expect:
Connect action getDetails to component Products.js.
Make onClick() to grab needed item's id.
Use find() item by it's id, receive item's info in state detailProduct.
No errors.
I'm making a website that have a functionality to change languages from the homescreen, I'm using Redux to handle the state.
I keep getting TypeError: Cannot read property 'connect' of undefined, and It seems to be from Home.js, I dont know why it happens!!, Please Help !!!
import React, { Component } from 'react';
import ReactRedux from 'react-redux';
import './Home.css';
import Navbar from '../../Reusable/Navbar/Navbar.js';
import Footer from '../../Reusable/Footer/Footer.js';
import Action from '../../Reusable/Action/Action.js';
import ProjectsCarousel from '../../Reusable/ProjectsCarousel/ProjectsCarousel.js';
import Getintouch from '../../Reusable/Getintouch/Getintouch.js';
import Header from './Header/Header.js';
import Info from './Info/Info.js';
import Whyus from './Whyus/Whyus.js';
import Testimonial from './Testimonial/Testimonial.js';
let actions = require('../../../actions');
class Home extends Component {
render() {
const content = this.props.content;
const switchLanguage = this.props.switchLanguage;
if (content){
return (
<div className="home">
<Action />
<Navbar data={content.page.menu} switchLanguage={switchLanguage}/>
<Header />
<Info data={content.page.home}/>
<ProjectsCarousel />
<Whyus />
<Testimonial />
<Getintouch />
<Footer />
</div>
)
} else {
return;
}
}
}
module.exports = ReactRedux.connect(
(state) => ({content: state.content}),
(dispatch) => ({switchLanguage: (lang) => dispatch(actions.switchLanguage(lang))})
)(Home);
export default Home;
That's because react-redux has only named exports.
change your import to:
import * as ReactRedux from 'react-redux';
which will import every named property to ReactRedux Object. or import it like:
import { connect } from 'react-redux';
export default connect(
(state) => ({content: state.content}),
(dispatch) => ({switchLanguage: (lang) => dispatch(actions.switchLanguage(lang))})
)(Home);