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
more like todo task delete task
Hussein Zaki
@Hussein90
can anyone help me
here is the updated code
import React, { Component } from 'react';
import './App.css';

class App extends Component {
 constructor(props) {
    super(props);
    this.state = {
      data: {posts: null, categories: null, subtasks: null}
    };
  }
  componentDidMount() {
    let url = "http://localhost:3001/db";
    fetch(url).then(data => data.json()).then(json => {
      console.log(json)
      this.setState({data: json})
    })
  }

  deletePost=(index, e) => {
    const dataposts= Object.assign(null, this.state.data.posts);
    dataposts.splice(index, 1);
    this.setState({data:dataposts});

  }

  render() {
    const subtasks = this.state.data.subtasks
    const categories = this.state.data.categories
    const posts = this.state.data.posts
    console.log(posts)
    return (
      <div className="App">
      <ul className="posts">

        {
          posts && posts.map(post => (
            <div key={post.id}>
              <li>{post.title}</li>

              <button >Delete</button>
              <ul>
                <li>{post.name}</li>
              </ul>
              <li>{post.tags}</li>
              <li>{post.duedate}</li>
            </div>
          ))
        }
        </ul>
        <ul className="categories">
        {
         categories && categories.map(category => (
            <div key={category.id}>
              <li>{category.name}</li>
            </div>
          ))
        }
        </ul>
        <ul>
        {
         subtasks && subtasks.map(subtask => (
            <div key={subtask.id}>
              <li>{subtask.item}</li>
            </div>
          ))
        }
        </ul>
      </div>
    );
  }
}



export default App;
Christopher McCormack
@cmccormack
@Hussein90 you may want to break this out into a codepen or codesandbox project so we can more easily help. It's also frowned upon to post large blocks of text/code like this
Hussein Zaki
@Hussein90
okay
Hussein Zaki
@Hussein90
here is the link on codesandbox
https://codesandbox.io/s/wy34yom6nl
Christopher McCormack
@cmccormack
Please ask a specific question as well @Hussein90 . What are you trying to do, what's not working.
Hussein Zaki
@Hussein90
okay i am trying to make a delete button so when i click on it delete the post which is beside it
Christopher McCormack
@cmccormack
@Hussein90 so you want to add a click handler to your button, correct? Do you know how to add handlers to elements?
BrianWilliams28
@BrianWilliams28
could someone assist as to why the following javascript function isn't working? it shows the element but will not hide it upon second+ click
const login = document.querySelector(".log-in");
const dropdown = document.querySelector("ul.nav-child.unstyled.small");

const showHide = function(){
 if (login.text !== "Log in") {
   console.log(login.text);
   login.setAttribute("href", "javascript: void(0)");
   if (dropdown.style.visibility = "hidden") {
     dropdown.style.visibility = "visible";
   } else {
       dropdown.style.visibility = "hidden";
   }
}
}

login.addEventListener("click", showHide);
});
Eric Weiss
@eweiss17
should it be decalred as a const?
maybe that doesn't matter
if (dropdown.style.visibility = "hidden") {
that is wrong
switch to ==
BrianWilliams28
@BrianWilliams28
@eweiss17 thanks but that actually breaks it...1 equal sign is correct syntax
it shows on initial click but does not hide
Eric Weiss
@eweiss17
wait what? if you have only = then it will always be true
BrianWilliams28
@BrianWilliams28
oh
you mean in the first if statement
Eric Weiss
@eweiss17
ya
BrianWilliams28
@BrianWilliams28
1 sec
Eric Weiss
@eweiss17
no in the dropdown.style.visibility if statement
BrianWilliams28
@BrianWilliams28
yeah ok you're right
that fixed it
@eweiss17 thanks
Hussein Zaki
@Hussein90
@cmccormack yes, check it i updated

the problem is i don't know where to put

delEvent={this.deletePost.bind(this, index)}

this code

Hussein Zaki
@Hussein90
@cmccormack
Christopher McCormack
@cmccormack

@Hussein90

<button onclick={delEvent}>Delete</button>

Can you not just replace delEvent with your code?

Hussein Zaki
@Hussein90
@cmccormack i tried but not working
Christopher McCormack
@cmccormack
And what troubleshooting have you done?
you don't have a valid json file in your codesandbox, how can you be troubleshooting at all?
You can use the link I sent you yesterday to test in codesandbox
Hussein Zaki
@Hussein90
i updated it
Christopher McCormack
@cmccormack
you have an error in your code; review the error and continue troubleshooting
Hussein Zaki
@Hussein90
okay
yeah the index is not identify
onclick={this.deletePost.bind(this, index)}
Christopher McCormack
@cmccormack
@Hussein90 in React you should use onClick
You need to create index somewhere... maybe in posts.map(post => (?
Hussein Zaki
@Hussein90
like that
var index =   ???
Christopher McCormack
@cmccormack
well that's one way to do it
but you need to figure that out. This is basic JavaScript, if you don't have a variable declared, you can't reference it
hint: the map callback has multiple arguments. MDN
@Hussein90 have you gone through the React course on FCC? It may be a good refresher that can fill in some concerns/gaps
Hussein Zaki
@Hussein90
it works now but it delete all
Christopher McCormack
@cmccormack
@Hussein90 I can tell you that deletePost is coded incorrectly. Walk through your logic and try to determine what's going on
Hussein Zaki
@Hussein90
i am doing that now