CodeCademy React Form Project

[danpetroski]

Hello! Its been a while. I’m learning React and actually liking the project structure and object setup. I’m making a form and I think I have every bit of syntax correct, but when I save the project, it simply isn’t showing up on the right hand console.

Can someone please take a look and let me know what is happening? I appreciate it.

Project link:

| Codecademy

[lasjorg]

We can’t see your code and the link also requires a login. Use StackBlitz/CodeSandbox to post your code.

[danpetroski]

Ohh well, then I’m not sure I’d want to give my login publicly. Let me think about it. Thanks.

[jwilkins.oboe]

you don’t need to provide your login.

But you can copy your code to something like stackblitz or codesandbox so we can see it

[danpetroski]

Okay I’ll do that thank you. The only issue is I’m going to look foolish if its the same but its some how showing up for you lol. But that’s tech work I guess.

[jwilkins.oboe]

Yes, that is fine.

Stackblitz and codesandbox both support that.
You can get started by using one of their react templates, and then copy the rest of your code into that new project.

Then you can share you link with the forum so we can see what is happening

[danpetroski]

Okay, I hope this works. Here is my full project from CodeCademy in SandBox.

mystifying-tharp-5hcznd - CodeSandbox

Essentially, its a task list creation app.

[jwilkins.oboe]

Here are a couple of things that I have spotted in your AddThought file.

You hare using the incorrect spelling for useState here

const [text, setText] = uesrState("");

You will also need to import useState at the top

import React, { useState } from "react";

Also, hooks need to be used inside the component.

It doesn’t look like props is defined here

  props.addThought(thought);

You wrote handleTextChange here but that is not defined

  onChange={handleTextChange}

maybe you meant handleChange?

I would suggest moving all of your handle functions and your useState hook into the AddThoughtForm component.

That should fix most of the errors

import React, { useState } from "react";
import { generateId, getNewExpirationTime } from "./utilities";


export function AddThoughtForm(props) {
  const [text, setText] = useState("");

const handleTextChange = ({ target }) => {
  const { value } = target;
  setText(value);
};

const handleSubmit = (event) => {
  event.preventDefault();
  const thought = {
    id: generateId(),
    text: text,
    expiresAt: getNewExpirationTime()
  };
  props.addThought(thought);
  setText("");
};

  return (
    <form onSubmit={handleSubmit} className="AddThoughtForm">
      <input
        onChange={handleTextChange}
        value={text}
        type="text"
        aria-label="What's on your mind?"
        placeholder="What's on your mind?"
      />
      <input type="submit" value="Add" />
    </form>
  );
}

[jwilkins.oboe]

It looks like you are also missing the index.js file and index.html file
And your Thought files should be inside the src dirctory.

I would suggest creating a new sandbox and creating a new react template.
That will ensure that you have the correct setup.

Once you see the default project showing, then you can add your own code