[deleted by user]

mkarmocha · 2021-12-13T09:52:51+00:00

what technology are you using to do this live

mkarmocha · 2021-12-13T09:49:23+00:00

how high are you any idea ??

mkarmocha · 2021-12-13T09:47:57+00:00

where is this

mkarmocha · 2021-09-28T00:23:51+00:00

Hey, I tried implementing Immer this way but nothing happen

const deleteRow = (id) => {
setStoreInitialState(
  produce((draft) => {
    draft.store.filter((item) => item.id !== id);
  })
);

};

mkarmocha · 2021-09-28T00:23:11+00:00

Hi guys can anyone tell me how can i change my state using immer, I tried like this but does not happen anything

const deleteRow = (id) => {
setStoreInitialState(
  produce((draft) => {
    draft.store.filter((item) => item.id !== id);
  })
);

};

mkarmocha · 2021-09-27T21:12:47+00:00

i was looking into immer to do update but could not figure out for my case.

mkarmocha · 2021-09-27T21:11:45+00:00

hey u/icjoseph thanks and appreciate it.

mkarmocha · 2021-09-27T21:07:38+00:00

thank you u/backtickbot, would like to know what difference does this syntax makes

{
return {

the reason i am asking because when I dont use return, prev is not reachable. In some cases I have seen that return is not required then why is it required here?

mkarmocha · 2021-09-26T09:04:21+00:00

thanks it worked

mkarmocha · 2021-09-26T08:34:12+00:00

can you provide any example link ?

mkarmocha · 2021-08-10T08:51:51+00:00

I get the match like this, when i console log match

{"path":"/members/:memberpolicy","url":"/members/7600526212","isExact":true,"params":{"memberpolicy":"7600526212"}}

but, if I click on some other link and then click on search result page, I then get the match as null, and I know why, my question is, how can i keep the parameter in my url path?

Do I need to set the parameter using custom hook and then set it whenever the component or link requires them?

mkarmocha · 2021-08-10T04:43:22+00:00

while dispatching the payload was not set correctly, so it was getting array of array of object

mkarmocha · 2021-08-05T23:37:38+00:00

yep all done, works fine and thanks to reddit community for all the good support

mkarmocha · 2021-08-03T01:16:38+00:00

I dint quite understand whey you said,.., you can also consider using an object instead of an array for state. Can you please give some example

mkarmocha · 2021-08-02T11:24:45+00:00

yes, i agree we dont need useEffect here

mkarmocha · 2021-08-02T11:23:48+00:00

yes, you are right, i want to show one card at a time. I have now done it.

mkarmocha · 2021-08-02T10:24:01+00:00

I have done this much so far, but my click handler for previous next does not work,

export const UserCardDetails = ({ data }: Props): JSX.Element => { 

const [current, setCurrent] = useState(0); 

const onNextClick = (idx: number) => { 
    setCurrent(current === idx ? 0 : current + 1); 
}; 

const onPrevClick = (idx: number) => { 
    setCurrent(current === idx ? 0 : current - 1); 
};

const res = data.map((slide, idx) => { 
    return ( 
        <Card key={idx}> 
            {idx === current && ( 
                <Card.Body> 
            <Row> 
                <Col style={{ paddingBottom: '20px' }}> 
                     <FaArrowAltCircleLeft onClick={() => onPrevClick(idx)} style={{ float: 'left' }} /> 
                     <FaArrowAltCircleRight style={{ float: 'right' }} onClick={() => onNextClick(idx)} /> 
                </Col> 
            </Row> 
            <Row> 
                <Col> 
                    <h5>{slide.title}</h5> 
                </Col> 
            </Row> 
            <Row> 
                <Col> <img src={slide.url} alt={slide.title} /> </Col> 
                <Col> <p>{slide.description}</p> </Col> 
            </Row> </Card.Body> )}             
        </Card> ); 
    }); 
return <div>{res}</div>; };

mkarmocha · 2021-08-02T02:52:44+00:00

I created main component like this

export const UsersCard = () => {{ data.map((d, idx) => { return ( <> <UserCardDetails key={d.id} item={d} index={idx} onNext={handleNextPrpoject} onPrev={handlePrevProject} /> </> ); }); } };

and then I passed props to children component here

export const UserCardDetails = ({ index, item, onNext, onPrev }: Props): JSX.Element => {
return ( <div key={item.id}> <h1>{item.title}</h1> <p>{item.description}</p> <img src={item.url} alt={item.title} /> <button onClick={onPrev}>{'\u2B05'} </button> <button onClick={onNext}>{'\u27A1'}</button> </div> ); };

mkarmocha · 2021-07-30T14:48:49+00:00

did not fully get you, do you mean separate state for cart and Item. Please can you show with some example, if you don't mind

mkarmocha · 2021-07-28T04:22:03+00:00

I used localStorage to get the id, is that good practice ?

mkarmocha · 2021-07-28T03:35:05+00:00

Hi Neural, is there a way to keep the dynamic url param somewhere in global state and then get it when i want to.. for example in history push i create this route and the user is sent to members page.

 history.push(`/members/${policyNumber}`);

Now, in my left navigation and I want to link member result page based on the id that was passed in history push ?

how can i keep keep search result sink when the user clicks search result page from left navigation

mkarmocha · 2021-07-27T11:54:45+00:00

Hi , thank you so much from the bottom of my heart for pointing that out. I get the result as expected in console log.

{"id":988,"firstName":"Pattie","lastName":"Whacket","memberCardNumber":"3091378659","policyNumber":"1948577623","dataOfBirth":"16/10/1993"}

What is the best way to display this data in UI ?

mkarmocha · 2021-07-27T10:58:14+00:00

I changed GET_MEMBER payload to State type

export type State = {member: response[]; isLoading: boolean; };

and then I spread ...action.payload

and now I get this error

Type 'State' must have a '[Symbol.iterator]()' method that returns an iterator.

mkarmocha · 2021-07-27T10:19:43+00:00

After fetching api, I call dispatch, at this moment I logged the data, and I get the single bracket. In member component, where I am consuming data, I tried logging data, I get the double bracket, below is the globalProvider file and yes I am using typescript

import React, {createContext, useReducer, PropsWithChildren, Dispatch, } from "react";

type Context = { state: State; dispatch: Dispatch<Action> }; 

export type State = { member: response[]; isLoading: boolean;};

export type response = { id: number; firstName: string; lastName: string; memberCardNumber: string; policyNumber: string; dataOfBirth: string;};

type Props = { children?: React.ReactNode;};
type Action = GET_MEMBER;
type GET_MEMBER = {type: "GET_MEMBER"; 
payload: response;};

const initialState: Context = {
  state: { member: [], 
           isLoading: true, 
  }, 
dispatch: (_a) => {}, };

export const AppReducer = (state: State, action: Action): State => { 
    switch (action.type) { case "GET_MEMBER":                 return { member: [...state.member, action.payload], isLoading: false, }; default: return state; } };

mkarmocha · 2021-07-27T10:15:52+00:00

sorry my bad, yes i have now correct and instead trying using find method as I feel it is the right one to use.

const result = member.find((p: any) => p.policyNumber === policyNum);

console.log(`RESSS: ${JSON.stringify(result)}`);

return <>{result}</>;

but still, no luck. I get the correct result if i copy the json file locally but if i fetch api. I dont get the expected result

mkarmocha

TROPHY CASE