Update Data on the Server with fetch in React

If i want to deploy this as an example to now.sh say, can I use json-server? Or is there another service I could hook up to it?

Scott,

You can, you just need to make a few small changes. Just keep in mind that json-server is file based, so it isn't something I'd use beyond an example.

1. Install json-server as a project dependency with npm i -S json-server
2. Update the base url for service calls in the todoService.js file to const baseUrl = './todos'
3. Change the start script in the package.json file to: "start": "json-server db.json --static ./build"

Then run now and you'll have a running example like [https://todoreact-umhsjinwdh.now.sh/](this one).

You may also want to reserve the original start script for local development by renaming it to something like dev - leaving "dev": "react-scripts start", in your package.json in addition to the new start script.

Hope this helps.

Hi Andrew,

I completed video 23 and my code is exactly the same as yours. The only difference is that I am using NodeJS version 7.10.0. I have both the json server going and the webpack dev server while working on everything so that is not the issue. I think Babel is not reading the code correctly. It has to do with updating the todos. I get all other messages that we have created, like addTodo message, and error message when text has not been applied to the unput before hitting return. So after I completed the code in video 23 and then went to check off a todo (not delete it, but ONLY check it as complete), this is what I got in the Chrome JS DevTools console:

Uncaught TypeError: Cannot read property 'isComplete' of undefined at toggleTodo (bundle.js:33981) at bundle.js:33665 at App._this.handleToggle (bundle.js:32909) at Object.executeOnChange (bundle.js:24778) at ReactDOMComponent._handleChange (bundle.js:24593) at Object.ReactErrorUtils.invokeGuardedCallback (bundle.js:17193) at executeDispatch (bundle.js:16976) at Object.executeDispatchesInOrder (bundle.js:16999) at executeDispatchesAndRelease (bundle.js:16387) at executeDispatchesAndReleaseTopLevel (bundle.js:16398)

Uncaught TypeError: Cannot read property 'isComplete' of undefined at toggleTodo (todoHelpers.js:8) at utils.js:3 at App._this.handleToggle (App.js:35) at Object.executeOnChange (LinkedValueUtils.js:132) at ReactDOMComponent._handleChange (ReactDOMInput.js:239) at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69) at executeDispatch (EventPluginUtils.js:85) at Object.executeDispatchesInOrder (EventPluginUtils.js:108) at executeDispatchesAndRelease (EventPluginHub.js:43) at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)

This is the code it's referring to in todoHelpers.js:

export const toggleTodo = (todo) => ({...todo, isComplete: !todo.isComplete})

This is where the error is occurring in bundle.js:

var toggleTodo = exports.toggleTodo = function toggleTodo(todo) { return Object.assign({}, todo, { isComplete: !todo.isComplete }); };

from todoHelpers.js line 8:

export const toggleTodo = (todo) => ({...todo, isComplete: !todo.isComplete})

in utils.js:

const _pipe = (f, g) => (...args) => g(f(...args))

I can only imagine that it is a transpiling error because I checked against your code and we have the same code. I may be missing something, but I haven't come across any difference yet, Here is the link to my code on github:

https://github.com/interglobalmedia/todo-list-create-react-app

Thanks!

Maria,

I'm not able to pull this code down and run it right now, but this might be the issue:

https://github.com/interglobalmedia/todo-list-create-react-app/blob/master/src/components/todo/TodoItem.js#L10

You've defined the partially applied handleToggle function: const handleToggle = partial(props.handleToggle, props.id) but you are using the props.handleToggle function in the onChange for the checkbox. Try removing props. from that and just pass in the locally created handleToggle that is partially applied with the id. Without it, the event object is being passed as the first argument to that function and it's trying to use that as the id to find the appropriate item in the list.

Hope this clears it up for you.

Had one issue with this otherwise great less that POST should be a PUT