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
Christopher McCormack
@cmccormack
so when you fetch the JSON file, you're fetch an object, which has each of those items as a property on that object
A JSON file can also be an array, so you should know the type of the object you are pulling down prior so you can properly handle it
Hussein Zaki
@Hussein90
@cmccormack
Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
let url = "./db.json";
Christopher McCormack
@cmccormack
Usually that means your file isn't a valid JSON file
Hussein Zaki
@Hussein90
it run in the localhost:3001
@cmccormack it works only when i put your link
Christopher McCormack
@cmccormack
My link is valid json
make sure yours is as well
not sure you can actually fetch json locally like that though
Hussein Zaki
@Hussein90
Because of that I make a local server http to call
But it works with objects in title
Like ‘local host:3001/posts’
@cmccormack
Christopher McCormack
@cmccormack
Are you running create-react-app in dev mode?
Hussein Zaki
@Hussein90
i am running create-react-app
Christopher McCormack
@cmccormack
is db.json different than the file we were working with before? Make sure the file is vali
Hussein Zaki
@Hussein90
no
it is the same
here it is
{
  "posts": [{
      "title": "CopyRight Automatico",
      "tags": "[JS]",
      "id": 1,
      "userId": 1,
      "name": "Shopping",
      "dueDate": null,
      "priority": "high",
      "categoryId": 1
    },
    {
      "title": "HtmlWebpackPlugin Multiples HTML files",
      "tags": "[JS, webpack]",
      "id": 2,
      "userId": 1,
      "name": "Cooking",
      "dueDate": null,
      "priority": "low",
      "categoryId": 1
    }
  ],
  "categories": [{
      "id": 1,
      "name": "Personal"
    },
    {
      "id": 2,
      "name": "Work"
    }
  ]
}
and also i want to call of the data at same time i mean i want when i run the app i get for example
categories name(personal,work) appear on the screen like when i was using the .map method
@cmccormack \
sorry i am bother you
Christopher McCormack
@cmccormack
Get the json file working, you may need to do some research into your error. There are JSON validation tools online you can use to validate the file, and you can use your browser dev tools to see if you are actually loading the correct file. Often times if your relative path is wrong, the file you load is actually a different file, possibly your index.html
Hussein Zaki
@Hussein90
the path is right
what about the other question
and also i want to call of the data at same time i mean i want when i run the app i get for example
categories name(personal,work) appear on the screen like when i was using the .map method @cmccormack
i working now on making it vaild
Christopher McCormack
@cmccormack
@Hussein90 one step at a time. There are great guides online on how to iterate over an Array to display React components
I believe FreeCodeCamp may even have an exercise or two on that
Hussein Zaki
@Hussein90

i fixed the json problem
the path was wrong
i just changed it now to that

http://localhost:3001/db

and it work
like magic

lwears
@lwears
hey guys, i cannot get the media query to pass the test on this. can anyone assist?
AJ Brommy
@AJ-Brommy
@lwears im not sure what you mean, it's not telling it to do anything, so nothing will happen.
Kirk Clemons
@kcclemo
Good morning all!
Hussein Zaki
@Hussein90
Good morning
Victor Popescu
@VicPopescu
Morning
Kirk Clemons
@kcclemo
Anyone working on anything interesting? Or maybe participating in Hacktoberfest?
Hussein Zaki
@Hussein90

hi i have create a function delete button in my project , here is my 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}
    };
  }
  componentDidMount() {
    let url = "http://localhost:3001/db";
    fetch(url).then(data => data.json()).then(json => {
      console.log(json)
      this.setState({data: json})
    })
  }

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

  }

  render() {
    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 onclick={delEVent}>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>
      </div>
    );
  }
}



export default App;

i stuck to where to put the code

delEVent={this.deleteUser.bind(this, index)}

to make the button work

Eric Weiss
@eweiss17
would it be similar to delete user?
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?