We Keep Coding

Getting Parsing error: Unexpected token, expected "," error while passing addToCart in dispatch with two parameters

I am getting error Parsing error: Unexpected token, expected "," at line 55 while dispatching addToCart action with two parameters. I am using redux toolkit. At line 27 this dispatch method is working properly. Please see the picture below. I am passing two parameters as an object.(redux toolkit syntax for passing parameters in async function)
Error at line 55
//CartScreen
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useParams, useLocation } from 'react-router-dom';
import {
Row,
Col,
ListGroup,
Image,
Form,
Button,
Card,
} from 'react-bootstrap';
import Message from '../components/Message';
import { addToCart } from '../features/addToCart/cartSlice';
const CartScreen = () => {
const { id } = useParams();
const location = useLocation();
const qty = location.search ? Number(location.search.split('=')[1]) : 1;
const dispatch = useDispatch();
const cart = useSelector((store) => store.cart);
const { cartItems } = cart;
console.log(cart);
useEffect(() => {
if (id) {
dispatch(addToCart({ id, qty }));
}
}, [dispatch, id, qty]);
return (
<Row>
<Col md={8}>
<h1>Shopping Cart</h1>
{cartItems.length === 0 ? (
<Message>
Your Cart is empty <Link to='/'>Go Back</Link>{' '}
</Message>
) : (
<ListGroup variant='flush'>
{cartItems.map((item) => {
<ListGroup.Item key={item.product}>
<Row>
<Col md={2}>
<Image src={item.image} alt={item.name} fluid rounded />
</Col>
<Col md={3}>
<Link to={`/product/${item.product}`}>{item.name} </Link>
</Col>
<Col md={2}>${item.price}</Col>
<Col md={2}>
<Form.Control
as='select'
value={qty}
onChange={(e) => dispatch(addToCart({item.product,e.target.value}))}
>
{
[...Array(item.countInStock).keys()].map((x) => (
<option key={x + 1} value={x + 1}>
{x + 1}
</option>
))
}
console.log(...Array(product.countInStock).keys())
</Form.Control>
</Col>
</Row>
</ListGroup.Item>;
})}
</ListGroup>
)}
</Col>
<Col md={2}></Col>
<Col md={2}></Col>
</Row>
);
};
export default CartScreen;
//CartSlice
import { createSlice, createAsyncThunk, current } from '#reduxjs/toolkit';
import axios from 'axios';
export const addToCart = createAsyncThunk(
'addToCart',
async ({ id, qty }, thunkAPI) => {
//getting id and qty from cartScreen
try {
const { data } = await axios(`/api/products/${id}`);
localStorage.setItem(
'cartItems',
JSON.stringify(thunkAPI.getState().cart.cartItems)
); //data ko local storage save rakhny k lye... isko humny json.stringify kea hy kun k local storage mein sirf string store kr sakty... yahan hum ny local storage mein store kea hy lekin isko fetch store mein jakar krein gay
const productData = {
product: data._id,
name: data.name,
image: data.image,
price: data.price,
countInStock: data.countInStock,
qty,
};
return productData;
} catch (error) {
console.log(error);
}
}
);
const initialState = {
cartItems: [],
};
const cartSlice = createSlice({
name: 'cartReducer',
initialState,
extraReducers: {
[addToCart.pending]: (state) => {
state.cartItems = [];
},
[addToCart.fulfilled]: (state, action) => {
const item = action.payload;
const existItem = state.cartItems.find(
(cartItem) => cartItem.product === item.product
);
if (existItem) {
return {
...state,
cartItems: state.cartItems.map((cartItem) => {
return cartItem.product === existItem.product ? item : cartItem;
}),
};
} else {
state.cartItems = [...state.cartItems, item];
}
},
[addToCart.rejected]: (state) => {
state.cartItems = 'Some error has occured';
},
},
});
export default cartSlice.reducer;

Sending only the updated/newly created records to API in react hooks

I'm trying to get the updated/newly created records and send it to the backend in "queryparam"
import React, { useState, useEffect } from "react";
//import { Container, Row, Col } from "reactstrap";
// import Box from "#mui/material/Box";
// import "bootstrap/dist/css/bootstrap.css";
// import "./index.css";
const Index = () => {
const [formValues, setFormValues] = useState([
{ orderno: 0, inputValue1: "", inputValue2: "", checked: false }
]);
const [isDisabled, setDisabled] = useState(false);
// const [inputVal1, setInputval1] = useState();
const [isChanged, setIsChanged] = useState([]);
const [error, setError] = useState(false);
const [orderNumber, setOrderNumber] = useState(1);
const addFormFields = () => {
// if (error) {
// setDisabled(false)
// }
// else {
// setDisabled(true)
// }
setFormValues((prevState) => [
...prevState,
{
orderno: orderNumber,
inputValue1: "",
inputValue2: "",
checked: false
}
]);
setOrderNumber((prev) => prev + 1);
};
const removeFormFields = (i) => {
let newFormValues = [...formValues];
newFormValues.splice(i, 1);
setFormValues(newFormValues);
setOrderNumber((prev) => prev - 1);
};
const onChangeFieldValue = (index, key, value) => {
setFormValues((prevState) => {
let copyState = [...prevState];
if (value?.length > 0) {
setError(false);
} else {
setError(true);
}
copyState[index][key] = value;
return copyState;
});
};
const saveFields = (e) => {
const queryparam = {
inputData: formValues
};
setIsChanged(queryparam);
setIsChanged((prevState, nextState) => {
let copyState = [];
if (prevState === nextState) {
copyState = [...prevState];
} else {
copyState = [...nextState];
}
return copyState;
});
console.log(isChanged, "lllllllll");
};
// useEffect(() => {
// saveFields()
// }, [isChanged])
return (
<>
{formValues.map((element, index) => (
<div className="form-inline" key={index}>
{/* <Container>
<Row>
<Col xs="12" sm="6"> */}
<label>{index + 1}</label>
<input
type="text"
value={element.inputVal1}
onChange={(e) =>
onChangeFieldValue(index, "inputValue1", e.target.value)
}
/>
<input
type="text"
value={element.inputVal2}
required
onChange={(e) =>
onChangeFieldValue(index, "inputValue2", e.target.value)
}
/>
{/* </Col>
<Col xs="12" sm="6">
<Box> */}
<button
className={`button ${error ? "add" : "btn-secondary"}`}
type="button"
disabled={error}
onClick={(e) => addFormFields(e)}
>
Add{console.log(isDisabled, "ooooooo", error)}
</button>
<button
type="button"
className="button remove"
onClick={() => removeFormFields(index)}
>
Remove
</button>
{/* </Box>
</Col>
</Row>
</Container> */}
</div>
))}
{/* <Row>
<Col sm="6" md={{ size: 4, offset: 2 }}>
<Box> */}
<button
type="button"
className="button save"
onClick={(e) => saveFields(e)}
>
Save
</button>
<button
type="button"
className="button remove"
//onClick={(e) => cancelFields(e)}
>
cancel
</button>
{/* </Box>
</Col>
</Row> */}
</>
);
};
export default Index;
https://codesandbox.io/s/black-fire-ixeir?file=/src/App.js:3662-3701
In the above link,
Step1 : when I add values for inputs "123" in input1 and "345" in input2.Then when I click on "Save" the values sent are {"input1":"123","input2":"345"}.
Step2: Again I try to add one row for inputs "456" in input1 and "678" in input2.Then when I click on save the values sent are {"input1":"456","input2":"678"}.
When I edit the existing row, for example the first row values and when I click on "Save" then only the first row value should be sent as the second row values hasn't changed.Also, If I add new rows then the newly added only should be sent if the existing row values aren't changed. Is there any way to send only the updated/newly created values to the backend using react hook

You could use a separate changes object to track changes by orderno property; saved during add/update/remove, and committed when submitting.
const [changes, setChanges] = useState({});
...
const addFormFields = () => {
const newItem = {
orderno: orderNumber,
inputValue1: "",
inputValue2: "",
checked: false,
type: "add"
};
setFormValues((values) => [...values, newItem]);
setChanges((changes) => ({
...changes,
[newItem.orderno]: newItem
}));
setOrderNumber((prev) => prev + 1);
};
const removeFormFields = (index) => {
const item = {
...formValues[index],
type: "remove"
};
setFormValues((values) => values.filter((el, i) => i !== index));
setChanges((changes) => ({
...changes,
[item.orderno]: item
}));
};
const onChangeFieldValue = (index, key, value) => {
const item = {
...formValues[index],
[key]: value,
type: "edit"
};
setFormValues((prevState) => {
if (value?.length > 0) {
setError(false);
const copyState = [...prevState];
copyState[index] = item;
return copyState;
} else {
setError(true);
return prevState;
}
});
setChanges((changes) => ({
...changes,
[item.orderno]: item
}));
};
const saveFields = (e) => {
const queryparam = {
inputData: Object.values(changes)
};
console.log("Changes to commit", queryparam);
setChanges({});
};

I want to convert React Class to Function (React Hooks)

I'm React Beginner.I trying to convert my React code written using class into function or React Hooks. Here is my code
import React, { Component, useState } from "react";
import { Badge, Card, Col, ListGroup, Row } from "react-bootstrap";
import { numberWithCommas } from "../utils/utils";
import Keranjang from "./Keranjang";
import TotalBayar from "./TotalBayar";
import { API_URL } from "../utils/constants";
import axios from "axios";
import swal from "sweetalert";
export default function Hasil(props) {
const [showModal, setShowModal] = useState(false);
const [keranjangDetail, setKeranjangDetail] = useState(false);
const [jumlah, setJumlah] = useState(0);
const [keterangan, setKeterangan] = useState("");
const [totalHarga, setTotalHarga] = useState(0);
const handleShow = (menuKeranjang) => {
setShowModal(true);
setKeranjangDetail(menuKeranjang);
setJumlah(menuKeranjang.jumlah);
setKeterangan(menuKeranjang.keterangan);
setTotalHarga(menuKeranjang.total_harga);
};
const handleClose = () => {
setShowModal(false);
};
const tambah = () => {
setJumlah(jumlah + 1);
setTotalHarga(keranjangDetail.product.harga * (jumlah + 1));
};
const kurang = () => {
if (jumlah !== 1) {
setJumlah(jumlah - 1),
setTotalHarga(keranjangDetail.product.harga * (jumlah - 1));
}
};
const changeHandler = (event) => {
setKeterangan(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
handleClose();
const data = {
jumlah: jumlah,
total_harga: totalHarga,
product: keranjangDetail.product,
keterangan: keterangan,
};
axios
.put(API_URL + "keranjangs/" + keranjangDetail.id, data)
.then((res) => {
swal({
title: "Update Pesanan!",
text: "Sukses Update Pesanan " + data.product.nama,
icon: "success",
button: false,
timer: 1500,
});
})
.catch((error) => {
console.log("Error yaa ", error);
});
};
const hapusPesanan = (id) => {
handleClose();
axios
.delete(API_URL + "keranjangs/" + id)
.then((res) => {
swal({
title: "Hapus Pesanan!",
text: "Sukses Hapus Pesanan " + keranjangDetail.product.nama,
icon: "error",
button: false,
timer: 1500,
});
})
.catch((error) => {
console.log("Error yaa ", error);
});
};
const { keranjangs } = useState(props);
return (
<Col md={3} className="mt-3">
<h4>
<strong>Keranjang</strong>
</h4>
<hr />
{keranjangs.length !== 0 && (
<Card className="overflow-auto hasil ">
<ListGroup variant="flush">
<Row className="category-aktif">
<Col xs={2} className="ml-3 mt-2">
<h5 className="ml-2">Jml</h5>
</Col>
<Col>
<h5 className="mt-2">Produk</h5>
</Col>
<Col>
<strong className="float-right mr-3 mt-2">Total Harga</strong>
</Col>
</Row>
{keranjangs.map((menuKeranjang) => (
<ListGroup.Item
key={menuKeranjang.id}
onClick={() => handleShow(menuKeranjang)}
>
<Row>
<Col xs={2}>
<h4>
<Badge pill variant="primary">
{menuKeranjang.jumlah}
</Badge>
</h4>
</Col>
<Col>
<h5>{menuKeranjang.product.nama}</h5>
<p>Rp. {numberWithCommas(menuKeranjang.product.harga)}</p>
</Col>
<Col>
<strong className="float-right">
Rp. {numberWithCommas(menuKeranjang.total_harga)}
</strong>
</Col>
</Row>
</ListGroup.Item>
))}
<Keranjang
handleClose={handleClose}
{...this.state}
tambah={tambah}
kurang={kurang}
changeHandler={changeHandler}
handleSubmit={handleSubmit}
hapusPesanan={hapusPesanan}
/>
</ListGroup>
</Card>
)}
<TotalBayar keranjangs={keranjangs} {...this.props} />
</Col>
);
}
but it give error said ./src/components/Hasil.js Line 68:7: Expected an assignment or function call and instead saw an expression no-unused-expressions
But I don't know what to do, anyone can help me? thanks in advance
btw, here is my original class code before convert it into function https://pastebin.com/0vTJ81kJ

I think the actual issue is a few lines up from what is being blamed.
There's an extraneous comma after setJumlah(jumlah - 1)
const kurang = () => {
if (jumlah !== 1) {
setJumlah(jumlah - 1), // <-- trailing comma at end of line
setTotalHarga(keranjangDetail.product.harga * (jumlah - 1));
}
};
It should be
const kurang = () => {
if (jumlah !== 1) {
setJumlah(jumlah - 1);
setTotalHarga(keranjangDetail.product.harga * (jumlah - 1));
}
};

this.state line should be removed or replaced in a functional way:
<Keranjang
handleClose={handleClose}
**{...this.state}** This is not for functional components
tambah={tambah}
kurang={kurang}
changeHandler={changeHandler}
handleSubmit={handleSubmit}
hapusPesanan={hapusPesanan}
/>
And also is extrange to have a coma here
const kurang = () => {
if (jumlah !== 1) {
setJumlah(jumlah - 1),// why coma
setTotalHarga(keranjangDetail.product.harga * (jumlah - 1));
}
};

How to render a icon dynamically using React Redux

I'm creating a playlist and I want to show my "favorite tracks" with a different icon, like a heart filled, by default render a bordered heart. Basically the default code is working but when refresh the page, the icon filled is gone and render the default.
And if anyone has a tip, i'm new in react and dont know if I can have many "useStates" like that.
I forgot to mention, the app are using Redux-persist, so the info continues in the store after the page refresh. That is why I want show the icon filled based on info at the store
import React, { useState, useEffect } from "react";
import ReactDOMServer from "react-dom/server";
import axios from "axios";
import { useSelector, useDispatch } from "react-redux";
import { ListContainer, PlayerStyle, InfoBox } from "./style.jsx";
import FavoriteBorderIcon from "#material-ui/icons/FavoriteBorder";
import FavoriteIcon from "#material-ui/icons/Favorite";
import PlayCircleOutlineIcon from "#material-ui/icons/PlayCircleOutline";
import PauseCircleOutlineIcon from "#material-ui/icons/PauseCircleOutline";
import MusicPlayer from "../MusicPlayer/index";
const List = () => {
const [isLoading, setLoading] = useState(true);
const [valueList, setValueList] = useState(20);
const [search, setSearch] = useState("");
const [dataList, setDataList] = useState([]);
const [trackList, setTrackList] = useState([]);
const [bannerAlbum, setBannerAlbum] = useState("");
const [createdBy, setCreatedBy] = useState("");
const [isPlayed, setIsPlayed] = useState(false);
const [musicPlayed, setMusicPlayed] = useState("");
const [showTrackList, setShowTrackList] = useState(true);
const [showFavoriteList, setShowFavoriteList] = useState(false);
const [favoriteData, setFavoriteData] = useState([]);
const favoriteList = useSelector(
(state) => state.FavoriteListReducer.favorites
);
const dispatch = useDispatch();
let chartPlaylist = `https://api.deezer.com/playlist/1111141961?&limit=${valueList}`;
useEffect(() => {
axios.get(chartPlaylist).then((res) => {
// console.log(res.data, "album");
setDataList(res.data);
setTrackList(res.data.tracks.data);
setBannerAlbum(res.data.picture_medium);
setCreatedBy(res.data.creator.name);
// Ao terminar a requisição dos dados, mostra os componentes
setLoading(false);
});
}, [chartPlaylist]);
useEffect(() => {
axios.all(favoriteList.map((l) => axios.get(l))).then(
axios.spread(function (...res) {
// all requests are now complete
setFavoriteData(res);
})
);
if (!showTrackList && favoriteList.length === 0) {
setShowTrackList(true);
setShowFavoriteList(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [favoriteList]);
const handleInput = (e) => {
setSearch(e.target.value);
};
const handlePlayed = () => {
if (!isPlayed) {
setIsPlayed(true);
} else {
setIsPlayed(false);
}
};
const handleIconSwap = (e) => {
e.currentTarget.firstElementChild.innerHTML = ReactDOMServer.renderToString(
!isPlayed ? <PlayCircleOutlineIcon /> : <PauseCircleOutlineIcon />
);
};
const Add_fav = (e) => {
dispatch({
type: "ADD_FAV",
newId: `https://api.deezer.com/track/${e.currentTarget.getAttribute(
"value"
)}`,
});
e.currentTarget.firstElementChild.innerHTML = ReactDOMServer.renderToString(
favoriteList.includes(e.currentTarget.getAttribute("value")) ? (
""
) : (
<FavoriteIcon style={{ color: "red" }} />
)
);
};
const Del_fav = (e) => {
dispatch({
type: "DELETE_FAV",
remove: `https://api.deezer.com/track/${e.currentTarget.getAttribute(
"value"
)}`,
});
e.currentTarget.firstElementChild.innerHTML = ReactDOMServer.renderToString(
favoriteList.includes(e.currentTarget.getAttribute("value")) ? (
""
) : (
<FavoriteBorderIcon fontSize={"inherit"} />
)
);
};
// eslint-disable-next-line no-array-constructor
const handleFav = (e) => {
favoriteList.includes(
`https://api.deezer.com/track/${e.currentTarget.getAttribute("value")}`
)
? Del_fav(e)
: Add_fav(e);
};
const toggleData = () => {
if (showTrackList && favoriteList.length > 0) {
setShowTrackList(false);
setShowFavoriteList(true);
}
if (!showTrackList) {
setShowTrackList(true);
setShowFavoriteList(false);
}
};
if (isLoading) {
return <div>Loading...</div>;
}
return (
<>
<button
onClick={() => {
if (valueList < 100) {
setValueList(valueList + 20);
}
}}
>
adicionar +20 musicas
</button>
<br />
<br />
<br />
<button
onClick={() => {
toggleData();
}}
>
Mostrar Favoritos
</button>
<InfoBox>
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
<div className="content">
<img src={bannerAlbum} alt="" />
<div className="Info--desc">
<h1>{dataList.title}</h1>
<div>
<span>criado por: </span>
{createdBy}
</div>
</div>
</div>
</InfoBox>
<ListContainer>
<div className="headerList">
<div className="rank">#</div>
<div className="favorite--icon">
{/* <FavoriteBorderIcon fontSize={"inherit"} /> */}
</div>
<div className="title--music">FAIXA</div>
<div className="title--artist">ARTISTA</div>
<div className="title--album">ALBUM</div>
<div className="title--duration">D.</div>
</div>
<div className="bodyList">
{showTrackList &&
trackList.map((item, key) => {
return (
<>
<div
key={key}
onMouseEnter={handleIconSwap}
onMouseLeave={(e) => {
if (!isPlayed) {
e.currentTarget.firstElementChild.innerHTML = key + 1;
} else {
e.currentTarget.firstElementChild.innerHTML =
ReactDOMServer.renderToString(
<PauseCircleOutlineIcon />
);
}
}}
>
<div
className="rank"
onClick={() => setMusicPlayed(trackList[key].preview)}
>
{key + 1}
</div>
<div className="favorite--icon">
// Here that has to dynamically render
<span value={item.id} onClick={(e) => handleFav(e)}>
<Icon favIco={false} />
</span>
</div>
<div className="title--music">
<a target="_blank" rel="noreferrer" href={item.link}>
{item.title}
</a>
</div>
<div className="title--artist">{item.artist.name}</div>
<div className="title--album">{item.album.title}</div>
<div className="title--duration">
{item.duration / 60 < 10
? "0" +
(item.duration / 60)
.toFixed(2)
.toString()
.replace(".", ":")
: (item.duration / 60)
.toFixed(2)
.toString()
.replace(".", ":")}
</div>
</div>
</>
);
})}
</div>
</ListContainer>
</>
);
};
const Icon = (props) => {
switch (props.favIco) {
case true:
return <FavoriteIcon style={{ color: "red" }} />;
case false:
return <FavoriteBorderIcon fontSize={"inherit"} />;
default:
return <FavoriteBorderIcon fontSize={"inherit"} />;
}
};
export default List;
My Reducer store is working fine, just not render the heart filled on load the page, if I click at heart and remove the info from the store and click again the icon change to filled again.
const initialState = {
favorites: [],
};
const List = (state = initialState, action) => {
switch (action.type) {
case "ADD_FAV":
return { ...state, favorites: [...state.favorites, action.newId] };
case "DELETE_FAV":
let index = state.favorites.indexOf(action.remove);
if (index > -1) {
state.favorites.splice(index, 1);
}
return {
...state,
favorites: [...state.favorites],
};
default:
}
return state;
};
export default List;
Thank you all

I've seen in your comment above that you're currently using redux-persist to keep the store between reloads, so having access to the data is not the problem.
Looking your code I think the problem might be with the way you're rendering the icons.
If I understood correctly, that is done by the Add_fav function:
const Add_fav = (e) => {
dispatch({
type: "ADD_FAV",
newId: `https://api.deezer.com/track/${e.currentTarget.getAttribute(
"value"
)}`,
});
e.currentTarget.firstElementChild.innerHTML = ReactDOMServer.renderToString(
favoriteList.includes(e.currentTarget.getAttribute("value")) ? (
""
) : (
<FavoriteIcon style={{ color: "red" }} />
)
);
};
But this function only runs when you add a new favorite - hence the absence of the icons after a reload, because this part of the code would not be ran at all.
My suggestion would be to change the icon rendering logic to the return JSX of the component, instead of inside the event handler function. Something like this:
<span value={item.id} onClick={(e) => handleFav(e)}>
{
favoriteList.includes(item.id)
? <FavoriteIcon style={{ color: "red" }} />
: <FavoriteBorderIcon fontSize={"inherit"} />
}
</span>

So figured out I was send to the store was a string and at the render logic was searching for a int number, then a edited the function add the method parseInt()
const Add_fav = (e) => {
dispatch({
type: "ADD_FAV",
newId: parseInt(e.currentTarget.getAttribute("value")),
});
};
and now works fine bacause the logic is searching for a Number Int.
<span value={item.id} onClick={(e) => handleFav(e)}>
{
favoriteList.includes(item.id)
? <FavoriteIcon style={{ color: "red" }} />
: <FavoriteBorderIcon fontSize={"inherit"} />
}
</span>

How to Receive the one stepper state value in to the another stepper in React js

I have created a stepper as a functional component as below
import NewProfile from './NewProfile';
function getSteps() {
return ['Carete Profile', 'Contact'];
}
function getStepContent(step) {
switch (step) {
case 0:
return <NewProfile type={valueTobePass}></NewProfile>;
default:
return <contact></contact>;
}
}
export default function HorizontalLinearStepper(props,previousState)
{
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);
const [publisherId, setPublisherId] = React.useState(0);
const [skipped, setSkipped] = React.useState(new Set());
const steps = getSteps();
const isStepOptional = (step) => {
return (step === 1 ||
step === 2)
};
console.log(props.newUserId);
const isStepSkipped = (step) => {
return skipped.has(step);
};
const addPublisherid =(publisherId) => {
setPublisherId(publisherId);
console.log(publisherId)
}
const handleNext = () => {
let newSkipped = skipped;
if (isStepSkipped(activeStep)) {
newSkipped = new Set(newSkipped.values());
newSkipped.delete(activeStep);
}
setActiveStep((prevActiveStep) => prevActiveStep + 1);
setSkipped(newSkipped);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
setActiveStep((prevActiveStep) => prevActiveStep + 1);
setSkipped((prevSkipped) => {
const newSkipped = new Set(prevSkipped.values());
newSkipped.add(activeStep);
return newSkipped;
});
}
return (
<div className={classes.root}>
<Stepper activeStep={activeStep}>
{steps.map((label, index) => {
const stepProps = {};
const labelProps = {};
if (isStepOptional(index)) {
labelProps.optional = <Typography variant="caption">Optional</Typography>;
}
if (isStepSkipped(index)) {
stepProps.completed = false;
}
return (
<Step key={index} {...stepProps}>
<StepLabel {...labelProps}>{label}</StepLabel>
</Step>
);
})}
{props.step}
</Stepper>
<div>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>
All steps completed - you&apos;re finished
</Typography>
</div>
) : (
<div>
<Typography className={classes.instructions}>{getStepContent(activeStep,previousState,props.type)}</Typography>
<div>
<Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
Back
</Button>
{isStepOptional(activeStep) && (
<Button
variant="contained"
color="primary"
onClick={handleSkip}
className={classes.button}
>
Skip
</Button>
)}
<Button
variant="contained"
color="primary"
onClick={handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
);
}
and the step is class component
class NewProfile extends Component {
constructor(props) {
super(props);
this.state = {
Name: '',
newUserId:'',
}
}
editAccountDetails = () => {
axios.post(`url`, {
"Name": this.state.Name,
})
.then(response => response.data)
.then((data) => {
this.setState({newUserId:data.id})
}).catch(error => { console.log(error); })
}
render() {
return <div>
<TextField }}
onChange={(event) => {
this.setState({ "Name":
event.target.value })
}} />
<Button onClick={this.editAccountDetails} >
Submit </MButton>
</div>
</div>
}
}
const NewProfileHOC = withStyles(styles)(NewProfile);
export default connect(mapStateToProps, mapDispatchToProps)(NewProfileHOC);
I want to retrieve the 'state' of the 'NewProfile' Component(Class Component) in the Stepper Component (Functional Component) for my further process
i tried with callBack function and context it is not working please help me out with this
thank you in advance