React code to build shopping cart The Next CEO of Stack OverflowJquery shopping cart code reviewReact Flux structure for a shopping appShopping cart simulatorShopping Cart with React JSReact Native - Rendering different scenes based on application stateExercise: Build a news page with React & React RouterCreate exact replica of react component with different nameES6 Javascript (React) code that maps and filters JSON dataCustom header with React-Navigation and React-Native-PaperCode improvements for React App

Is it ever safe to open a suspicious HTML file (e.g. email attachment)?

Help understanding this unsettling image of Titan, Epimetheus, and Saturn's rings?

Why am I getting "Static method cannot be referenced from a non static context: String String.valueOf(Object)"?

Why is the US ranked as #45 in Press Freedom ratings, despite its extremely permissive free speech laws?

Spaces in which all closed sets are regular closed

How to get the last not-null value in an ordered column of a huge table?

Do scriptures give a method to recognize a truly self-realized person/jivanmukta?

Help/tips for a first time writer?

Could a dragon use its wings to swim?

how one can write a nice vector parser, something that does pgfvecparseA=B-C; D=E x F;

Is dried pee considered dirt?

What steps are necessary to read a Modern SSD in Medieval Europe?

Aggressive Under-Indexing and no data for missing index

Won the lottery - how do I keep the money?

Can this note be analyzed as a non-chord tone?

What was Carter Burke's job for "the company" in Aliens?

What day is it again?

Reshaping json / reparing json inside shell script (remove trailing comma)

Is fine stranded wire ok for main supply line?

"Eavesdropping" vs "Listen in on"

Why is information "lost" when it got into a black hole?

In the "Harry Potter and the Order of the Phoenix" video game, what potion is used to sabotage Umbridge's speakers?

Can you teleport closer to a creature you are Frightened of?

Why don't programming languages automatically manage the synchronous/asynchronous problem?



React code to build shopping cart



The Next CEO of Stack OverflowJquery shopping cart code reviewReact Flux structure for a shopping appShopping cart simulatorShopping Cart with React JSReact Native - Rendering different scenes based on application stateExercise: Build a news page with React & React RouterCreate exact replica of react component with different nameES6 Javascript (React) code that maps and filters JSON dataCustom header with React-Navigation and React-Native-PaperCode improvements for React App










0












$begingroup$


I have built a basic shopping cart simulator, all it does is add and remove items between two different basket i.e (aisle vs basket)



While working on the problem i started to think about the approach, would love to hear what people think ?

1. Avoid initializing the state empty state in the constructor, however i had to initialize shoppingCart: [] in componentDidMount hook to avoid type error. What is the better and clean approach ?

2. Is it good practice to keep the logic simple in handleXXXClicks, separation of concern one for handling items and one for shoppingCart ?

3. I feel aisleList and cartList bloated and i could have written itemComponent which is avoid duplicate code.

4. Is there any better way to handle the item in setState ? I couldn't think of using prevState in my scenario.



Use setState without initializing state



componentDidMount() 
// assuming data comes from API fetch
let items = ["banana", "eggs", "bread", "apple"];
this.setState(
items,
shoppingCart: [] // had to set this empty to avoid typeerror
);



handle handleClick and setState



handleCartClick = event => 
let newList = this.state.shoppingCart.filter(item =>
return item !== event.target.value;
);

this.setState(
items: [...this.state.items, event.target.value],
shoppingCart: [...newList]
);
;


Gist link

Demo link









share







New contributor




Mad-D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.







$endgroup$
















    0












    $begingroup$


    I have built a basic shopping cart simulator, all it does is add and remove items between two different basket i.e (aisle vs basket)



    While working on the problem i started to think about the approach, would love to hear what people think ?

    1. Avoid initializing the state empty state in the constructor, however i had to initialize shoppingCart: [] in componentDidMount hook to avoid type error. What is the better and clean approach ?

    2. Is it good practice to keep the logic simple in handleXXXClicks, separation of concern one for handling items and one for shoppingCart ?

    3. I feel aisleList and cartList bloated and i could have written itemComponent which is avoid duplicate code.

    4. Is there any better way to handle the item in setState ? I couldn't think of using prevState in my scenario.



    Use setState without initializing state



    componentDidMount() 
    // assuming data comes from API fetch
    let items = ["banana", "eggs", "bread", "apple"];
    this.setState(
    items,
    shoppingCart: [] // had to set this empty to avoid typeerror
    );



    handle handleClick and setState



    handleCartClick = event => 
    let newList = this.state.shoppingCart.filter(item =>
    return item !== event.target.value;
    );

    this.setState(
    items: [...this.state.items, event.target.value],
    shoppingCart: [...newList]
    );
    ;


    Gist link

    Demo link









    share







    New contributor




    Mad-D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.







    $endgroup$














      0












      0








      0





      $begingroup$


      I have built a basic shopping cart simulator, all it does is add and remove items between two different basket i.e (aisle vs basket)



      While working on the problem i started to think about the approach, would love to hear what people think ?

      1. Avoid initializing the state empty state in the constructor, however i had to initialize shoppingCart: [] in componentDidMount hook to avoid type error. What is the better and clean approach ?

      2. Is it good practice to keep the logic simple in handleXXXClicks, separation of concern one for handling items and one for shoppingCart ?

      3. I feel aisleList and cartList bloated and i could have written itemComponent which is avoid duplicate code.

      4. Is there any better way to handle the item in setState ? I couldn't think of using prevState in my scenario.



      Use setState without initializing state



      componentDidMount() 
      // assuming data comes from API fetch
      let items = ["banana", "eggs", "bread", "apple"];
      this.setState(
      items,
      shoppingCart: [] // had to set this empty to avoid typeerror
      );



      handle handleClick and setState



      handleCartClick = event => 
      let newList = this.state.shoppingCart.filter(item =>
      return item !== event.target.value;
      );

      this.setState(
      items: [...this.state.items, event.target.value],
      shoppingCart: [...newList]
      );
      ;


      Gist link

      Demo link









      share







      New contributor




      Mad-D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.







      $endgroup$




      I have built a basic shopping cart simulator, all it does is add and remove items between two different basket i.e (aisle vs basket)



      While working on the problem i started to think about the approach, would love to hear what people think ?

      1. Avoid initializing the state empty state in the constructor, however i had to initialize shoppingCart: [] in componentDidMount hook to avoid type error. What is the better and clean approach ?

      2. Is it good practice to keep the logic simple in handleXXXClicks, separation of concern one for handling items and one for shoppingCart ?

      3. I feel aisleList and cartList bloated and i could have written itemComponent which is avoid duplicate code.

      4. Is there any better way to handle the item in setState ? I couldn't think of using prevState in my scenario.



      Use setState without initializing state



      componentDidMount() 
      // assuming data comes from API fetch
      let items = ["banana", "eggs", "bread", "apple"];
      this.setState(
      items,
      shoppingCart: [] // had to set this empty to avoid typeerror
      );



      handle handleClick and setState



      handleCartClick = event => 
      let newList = this.state.shoppingCart.filter(item =>
      return item !== event.target.value;
      );

      this.setState(
      items: [...this.state.items, event.target.value],
      shoppingCart: [...newList]
      );
      ;


      Gist link

      Demo link







      javascript ecmascript-6 react.js react-native





      share







      New contributor




      Mad-D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.










      share







      New contributor




      Mad-D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.








      share



      share






      New contributor




      Mad-D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 3 mins ago









      Mad-DMad-D

      1011




      1011




      New contributor




      Mad-D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Mad-D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Mad-D is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.




















          0






          active

          oldest

          votes












          Your Answer





          StackExchange.ifUsing("editor", function ()
          return StackExchange.using("mathjaxEditing", function ()
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          );
          );
          , "mathjax-editing");

          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "196"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );






          Mad-D is a new contributor. Be nice, and check out our Code of Conduct.









          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f216618%2freact-code-to-build-shopping-cart%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          Mad-D is a new contributor. Be nice, and check out our Code of Conduct.









          draft saved

          draft discarded


















          Mad-D is a new contributor. Be nice, and check out our Code of Conduct.












          Mad-D is a new contributor. Be nice, and check out our Code of Conduct.











          Mad-D is a new contributor. Be nice, and check out our Code of Conduct.














          Thanks for contributing an answer to Code Review Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          Use MathJax to format equations. MathJax reference.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f216618%2freact-code-to-build-shopping-cart%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          名間水力發電廠 目录 沿革 設施 鄰近設施 註釋 外部連結 导航菜单23°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.7113923°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.71139計畫概要原始内容臺灣第一座BOT 模式開發的水力發電廠-名間水力電廠名間水力發電廠 水利署首件BOT案原始内容《小檔案》名間電廠 首座BOT水力發電廠原始内容名間電廠BOT - 經濟部水利署中區水資源局

          Prove that NP is closed under karp reduction?Space(n) not closed under Karp reductions - what about NTime(n)?Class P is closed under rotation?Prove or disprove that $NL$ is closed under polynomial many-one reductions$mathbfNC_2$ is closed under log-space reductionOn Karp reductionwhen can I know if a class (complexity) is closed under reduction (cook/karp)Check if class $PSPACE$ is closed under polyonomially space reductionIs NPSPACE also closed under polynomial-time reduction and under log-space reduction?Prove PSPACE is closed under complement?Prove PSPACE is closed under union?

          Is my guitar’s action too high? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)Strings too stiff on a recently purchased acoustic guitar | Cort AD880CEIs the action of my guitar really high?Μy little finger is too weak to play guitarWith guitar, how long should I give my fingers to strengthen / callous?When playing a fret the guitar sounds mutedPlaying (Barre) chords up the guitar neckI think my guitar strings are wound too tight and I can't play barre chordsF barre chord on an SG guitarHow to find to the right strings of a barre chord by feel?High action on higher fret on my steel acoustic guitar