Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Hussein Zaki
@Hussein90
in arry like
{title: "CopyRight Automatico", tags: "[JS]", id: 1, userId: 1, name: "Shopping", …
Christopher McCormack
@cmccormack
yup, and what was data prior to that?
  deletePost = (index, e) => {
    console.log(this.state.data) // <= Add this log
    const dataposts = Object.assign([], this.state.data.posts);
    dataposts.splice(index, 1);
    this.setState({ data: dataposts }, () => console.log(this.state.data));
  };
Hussein Zaki
@Hussein90
now when i click on for example one the first button the info of the second appear and vise versa also the same
on console
Christopher McCormack
@cmccormack
@Hussein90 I have no idea what you mean, can you show us?
Hussein Zaki
@Hussein90
Opera Snapshot_2018-10-23_002142_localhost.png
the red arrrow for the first button info up of it and other arrow for the second button and info up of it also
here is the console appear after i click on the first button
2018-10-23_0-23-42.jpg
@cmccormack
Hussein Zaki
@Hussein90
you can check it by yourself at
https://codesandbox.io/s/wy34yom6nl
Christopher McCormack
@cmccormack
@Hussein90 notice how the first log statement (above undefined) is an object, and the second log statement (below undefined) is an array?
Hussein Zaki
@Hussein90
yes
Christopher McCormack
@cmccormack
@Hussein90 Should it?
Hussein Zaki
@Hussein90
no
i think
Christopher McCormack
@cmccormack
No, it should not, it should have the same structure. You are overriding data with your posts array, but data should contain a posts property and a categories property, correct?
Hussein Zaki
@Hussein90
correct
but i want for every property it's individual delete button
Christopher McCormack
@cmccormack
Right...
You are overwriting your entire data object with an array, that's why it isn't working.
you aren't deleting any single item, you're completely destroying your state structure
Hussein Zaki
@Hussein90
when i am click on delete i destroy the whole app
Christopher McCormack
@cmccormack
You are turning state: { data: { posts: [...], categories: [...] } } into state: { data: [...] }
That's the best I'm going to be able to do to help right now @Hussein90 , I have to go for a while.
Hussein Zaki
@Hussein90

now it get

@Hussein90 notice how the first log statement (above undefined) is an object, and the second log statement (below undefined) is an array?
it returns now is null

this.setState({  data: { posts: [], categories: [] } }, () => console.log(this.state.data));
Hussein Zaki
@Hussein90
anyone here help me to finish this please
Brad
@bradtaniguchi
@Hussein90 sounds like you already figured it out?
Hussein Zaki
@Hussein90
still not working
still all disappear
Brad
@bradtaniguchi
@Hussein90 Have you inspected the html to see what actually is left? (hint: there is stuff there)
Using your dev tools, to see what is left over in the view
it's actually really obvious once you see what is currently there after you hit delete
Hussein Zaki
@Hussein90
@bradtaniguchi these appear
{posts: Array(0), categories: Array(0)}////
Brad
@bradtaniguchi
yea... so if your posts and categories are empty what do you render to the use according to the react code you currently hav?
Hussein Zaki
@Hussein90
they are not empty at all
Brad
@bradtaniguchi
whats not empty?
Hussein Zaki
@Hussein90
Opera Snapshot_2018-10-23_002142_localhost.png
@bradtaniguchi from these is coming so
the posts nad categories are not empty at all
Brad
@bradtaniguchi
after you hit delete?
Hussein Zaki
@Hussein90
no before
Brad
@bradtaniguchi
....idk what your trying to say, I'm only trying to help you with the bug where everything "disappears" when you hit delete.
When you hit delete inspect the page for the html and look at what actually is rendered
Hussein Zaki
@Hussein90
yes
i am sorry
@bradtaniguchi
there is nothing
not before or after
<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"><div class="App"><ul class="posts"><form><input placeholder="enter your task here" value=""><button type="submit">add</button></form><div><li>CopyRight Automatico</li><button>Delete</button><ul><li>Shopping</li></ul><li>[JS]</li><li></li></div><div><li>HtmlWebpackPlugin Multiples HTML files</li><button>Delete</button><ul><li>Cooking</li></ul><li>[JS, webpack]</li><li></li></div></ul><ul class="categories"><div><li>Personal</li></div><div><li>Work</li></div></ul></div></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><div id="ghostery-purple-box" class="ghostery-bottom ghostery-right ghostery-none ghostery-collapsed"><div id="ghostery-box"><div id="ghostery-count" style="background: none; color: rgb(255, 255, 255);">0</div><div id="ghostery-pb-icons-container"><span id="ghostery-breaking-tracker" class="ghostery-pb-tracker" title="Broken Page Trackers" style="background: url(&quot;data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+DQogICAgPHRpdGxlPmJyZWFraW5ncGFnZTwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGRlZnM+PC9kZWZzPg0KICAgIDxnIGlkPSJQdXJwbGUtQm94IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQxNi4wMDAwMDAsIC00NTMuMDAwMDAwKSIgaWQ9ImJhbSEtYnJlYWtpbmctdGhlLXBhZ2UtY29weS0yIiBmaWxsPSIjRkNCQTMzIj4NCiAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQxNi4wMDAwMDAsIDQ1My4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOSwwLjE5NTY1MjE3NCBDNC4xNDQzNjAyNSwwLjE5NTY1MjE3NCAwLjE5NTY1MjE3NCw0LjE0NDM2MDI1IDAuMTk1NjUyMTc0LDkgQzAuMTk1NjUyMTc0LDEzLjg1NTYzOTggNC4xNDQzNjAyNSwxNy44MDQzNDc4IDksMTcuODA0MzQ3OCBDMTMuODU1NjM5OCwxNy44MDQzNDc4IDE3LjgwNDM0NzgsMTMuODU1NjM5OCAxNy44MDQzNDc4LDkgQzE3LjgwNDM0NzgsNC4xNDQzNjAyNSAxMy44NTU2Mzk4LDAuMTk1NjUyMTc0IDksMC4xOTU2NTIxNzQgWiBNMTEuNDg1NTg5OSwxMy40MTA0NDQxIEwxMS4wNzcwNzk4LDEzLjAyMDY3NjggTDEyLjEwMDQ3MTEsMTIuMjE2OTU3OSBMMTEuMDQ2MjQ1MSwxMi4yMTY5NTc5IEwxMS4yMzQ0NzgxLDEwLjg3MDcwODcgTDkuODAzMTgxNDIsMTEuNzk1NzUxMiBMOS40MDMzMzczNCw5LjM0NTA5MzkyIEw4LjY5NDc0MjY5LDExLjA4NjU1MTkgTDcuMzI1NzIwMDksMTAuMTcwOTgxNSBMNy43NTI1Njk3NywxMS45Mjk1NyBMNi41NTQyNDY3MywxMi4zMTE0Nzc1IEw3Ljg4MjM1Nzg3LDEzLjQxMDQ0NDEgTDExLjQ4NTU4OTksMTMuNDEwNDQ0MSBaIE02LjcxNTY3NTcyLDEzLjQxMDQ0NDEgTDUuMDI4NjMxOTcsMTIuMDA2NzU3NiBMNi44Njg0Mzg3MywxMS40MzE5ODE4IEw2LjE2Mzg3NDc3LDguNDg4NTczMDkgTDguMzQ5MzEyODgsOS45NTk5NzUxMiBMOS43MDQwMjY1NCw2LjYxMjQ5MDE1IEwxMC4zNTAzNDcxLDEwLjU1NjcxODIgTDEyLjE5NDk5MDcsOS4zNzY1MzMyOCBMMTEuODk4OTM2OCwxMS40NzY5MjM5IEwxNC4yNjI5MzQzLDExLjQ3NjkyMzkgTDEyLjIxMjkyNzIsMTMuMDc4OTIwMiBMMTIuNTY3MjI0NSwxMy40MTA0NDQxIEwxNS4zMzEyNjc3LDEzLjQxMDQ0NDEgTDE0LjQ3Mzk0MDcsMTIuNTk4NjYzOSBMMTcuMjA3MzUwNiwxMC40NjY4MzM5IEwxMy4wNjA3ODIxLDEwLjQ2NjgzMzkgTDEzLjQ5NjI5NzcsNy4zNDg2OTUgTDExLjA5OTg1MzIsOC44Nzg5NDUwNSBMMTAuMTIxMjAyNiwyLjg5Mjc3MTMgTDcuODc3NzIyNTgsOC40MjU0OTI4NSBMNC41NzA1NDQ0Nyw2LjIwMzk4MDEgTDUuNjY1NDgwNDEsMTAuNzUwMzkyNyBMMi45NTEwMTQ3MiwxMS41OTgyNDc2IEw1LjEzNjQ1MjgzLDEzLjQxMDQ0NDEgTDYuNzE1Njc1NzIsMTMuNDEwNDQ0MSBaIiBpZD0iYnJlYWtpbmdwYWdlIj48L3BhdGg+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=&quot;); opacity: 0.5;"></span><span id="ghostery-slow-tracker" class="ghostery-pb-tracker" title="Slow Trackers" style="background: url(&quot;data:image/svg+xml