ReactJS: Rewriting code from class to function

react convert class to function online
functions inside functional component react
react hooks
react convert class component to hooks
react functional components
useeffect react
convert class component to functional react online
convert class component to functional component react typescript

I rewrote my code from class-based to function-based. Unfortunately, after rewriting it, I get the error message TypeError: notes.map is not a function.

const App = () => {
  const [id, setId] = useState("");
  const [note, setNote] = useState("");
  const [notes, setNotes] = useState("");

  useEffect(() => {
    getNotes();
    const createNoteListener = API.graphql(
      graphqlOperation(onCreateNote)
    ).subscribe({
      next: noteData => {
        const newNote = noteData.value.data.onCreateNote;
        setNotes(prevNotes => {
          const oldNotes = prevNotes.filter(note => note.id !== newNote.id);
          const updatedNotes = [...oldNotes, newNote];
          return updatedNotes;
        });
        setNote("");
      }
    });
    const deleteNoteListener = API.graphql(
      graphqlOperation(onDeleteNote)
    ).subscribe({
      next: noteData => {
        const deletedNote = noteData.value.data.onDeleteNote;
        setNotes(prevNotes => {
          const updatedNotes = prevNotes.filter(
            note => note.id !== deletedNote.id
          );
          return updatedNotes;
        });
      }
    });
    const updateNoteListener = API.graphql(
      graphqlOperation(onUpdateNote)
    ).subscribe({
      next: noteData => {
        const updatedNote = noteData.value.data.onUpdateNote;
        setNotes(prevNotes => {
          const index = prevNotes.findIndex(note => note.id === updatedNote.id);
          const updatedNotes = [
            ...notes.slice(0, index),
            updatedNote,
            ...notes.slice(index + 1)
          ];
          return updatedNotes;
        });
        setNote("");
        setId("");
      }
    });

    return () => {
      createNoteListener.unsubscribe();
      deleteNoteListener.unsubscribe();
      updateNoteListener.unsubscribe();
    };
  }, []);

  const getNotes = async () => {
    const result = await API.graphql(graphqlOperation(listNotes));
    setNotes(result.data.listNotes.items);
  };

  const handleChangeNote = event => setNote(event.target.value);

  const hasExistingNote = () => {
    if (id) {
      const isNote = notes.findIndex(note => note.id === id) > -1;
      return isNote;
    }
    return false;
  };

  const handleAddNote = async event => {
    event.preventDefault();
    // Check if we have an exisiting note. If so, then update it.
    if (hasExistingNote()) {
      handleUpdateNote();
    } else {
      const input = { note };
      await API.graphql(graphqlOperation(createNote, { input }));
    }
  };

  const handleUpdateNote = async () => {
    const input = { id, note };
    await API.graphql(graphqlOperation(updateNote, { input }));
  };

  const handleDeleteNote = async noteId => {
    const input = { id: noteId };
    await API.graphql(graphqlOperation(deleteNote, { input }));
  };

  const handleSetNote = ({ note, id }) => {
    setNote(note);
    setId(id);
  };

  return (
    <div className="flex flex-column items-center justify-center pa3 bg-washed-red">
      <h1 className="code f2-l">Amplify Notetake</h1>
      {/* Note Form */}
      <form onSubmit={handleAddNote} className="mb3">
        <input
          type="text"
          className="pa2 f4"
          placeholder="Write your note"
          onChange={handleChangeNote}
          value={note}
        />
        <button className="pa2 f4" type="submit">
          {id ? "Update note" : "Add note"}
        </button>
      </form>

      {/* Notes list */}
      <div>
        {notes.map(item => (
          <div key={item.id} className="flex items-center">
            <li onClick={() => handleSetNote(item)} className="list pa1 f3">
              {item.note}
            </li>
            <button
              onClick={() => handleDeleteNote(item.id)}
              className="bg-transparent bn f4"
            >
              <span>&times;</span>
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default withAuthenticator(App, { includeGreetings: true });

If notes is intended to be an array of notes as it appears to be, you'll want to initialize it with an empty array, so const [notes, setNotes] = useState([]); instead of with an empty string like you currently are.

ReactJS: Rewriting code from class to function, If notes is intended to be an array of notes as it appears to be, you'll want to initialize it with an empty array, so const [notes, setNotes]� Linting is a process wherein we run a program that analyses code for potential errors. Mostly, we use it for language-related issues. But it can also fix many other issues automatically, particularly code style. Using a linter in your React code helps to keep your code relatively error- and bug-free. Final words on React best practices

Array in react hooks should be manipulated like this.

 const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([
      ...items,
      {
        id: items.length,
        value: Math.random() * 100
      }
    ]);
  };

  return (
    <>
      <button onClick={addItem}>Add a number</button>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </>
  );

Five Ways to Convert React Class Components to Functional , This code is an example of how you can convert a class-based React component with state to a functional component using Hooks. We can� This only works because the reusable component was set up to accept contextual class names and inline style properties. Of course, that's exactly what the Div, Span, and other "native" ReactJS elements are doing. On a side-note, I just watched an interesting presentation by Michael Chan on moving a lot of style into your ReactJS components.

try initializing notes state with []

const [notes, setNotes] = useState([]);

see the following diff

How to convert a React Class Component to a Function Component, If you've got an older codebase, or you'd like to try the power of React hooks in your code, function components can be a great way to do it. Christopher Pitt is back with another esoteric use case in PHP land - building custom compilers! Here he builds one which can process ReactJS code in PHP!

How Does React Tell a Class from a Function? — Overreacted, However, classes are more recent. They let us rewrite the code above to match our intent more closely: class Person { constructor� React lets you define components as a class or a function. Use the ‘inspect element’ tool to play around with the code and take notice of the Sending Form Data with ReactJS + NodeJS

Practical React Hooks: How to refactor your app to use Hooks , before import React, {Component} from 'react'; class App extends While it sounds great to rewrite your applications/components to use Hooks, it does In the code above, the doSomething function will only be run when the� ReactJS in PHP: Writing Compilers Is Easy and Fun!. I used to use an extension called XHP. It enables HTML-in-PHP syntax for generating front-end markup. I reached for it recently, and was surprised to find that it was no longer officially supported for modern PHP versions.

Refactoring In React. Identifying patterns in react that are…, Above code is functional and will definitely solve your problem. tests for the same as they end up rewriting or copy pasting same kind of Also this is dangerous as these methods are part of your component class and you� If you specify the class name in render() function the component will be rendered with animation on page load. If you want to control/toggle animation after first render, you can control the class name using component state like so:

Comments
  • There actually still seems to be a problem I now see Line 69:6: React Hook useEffect has a missing dependency: 'notes'. Either include it or remove the dependency array. You can also do a functional update 'setNotes(n => ...)' if you only need 'notes' in the 'setNotes' call react-hooks/exhaustive-deps. After I changed it from "" to []. Do you see any other issue with my code?
  • At the end of useEffect you have this line: }, []); - you should either add notes to that array, or remove it altogether. If you pass that array in, you need to tell useEffect all state and properties that a change in them will cause the useEffect hook to fire.
  • Hmm in the course I made about it he said that's necessary so it is only used for the mount and unmount – not on all other effects.
  • That is what the empty array will do, yes. This is probably not an error and likely a warning? The react docs say there are better ways to do this but that it will work. reactjs.org/docs/…
  • Ahh, in the very last minute he said he did a mistake and ...notes should be ...prevNotes.
  • After I changed const [notes, setNotes] = useState([]); to const [notes, setNotes] = useState("");. There actually still seems to be a problem I now see Line 69:6: React Hook useEffect has a missing dependency: 'notes'. Either include it or remove the dependency array. You can also do a functional update 'setNotes(n => ...)' if you only need 'notes' in the 'setNotes' call react-hooks/exhaustive-deps. After I changed it from "" to []. Do you see any other issue with my code?
  • In now see Line 69:6: React Hook useEffect has a missing dependency: 'notes'. Either include it or remove the dependency array. after I changed that. Do you have any other idea why?
  • this could be a linting warning