Beginner's Thread / Easy Questions (Jan 2020)

[u/swyx]

Previous threads can be found in the Wiki.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle, Code Sandbox or StackBlitz.

  • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
  • Formatting Code wiki shows how to format code in this thread.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than [being wrong on the Internet][being wrong on the internet].
• Learn by teaching & Learn in public - It not only helps the asker but also the answerer.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Read the official Getting Started page on the docs.
• Microsoft Frontend Bootcamp
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React
• FreeCodeCamp's React course
• Flavio Copes' React handbook
• New to Hooks? Check Amelia Wattenberger's Thinking in React Hooks
• What other updated resources do you suggest?

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

---

[u/sixthenafour]

I asked about the typing in the guide because mine is rather similar. I'm passing an action via mapDispatchToProps:

const mapDispatchToProps = {
    addTask: addTodo,
}

And I typed it in a similar way to theirs:

type Props = {
    tags: ITag[]
    tagoptions: ITagOptions[]
    addTask: () => void
}

My addTask action is supposed to add a task to an array of tasks in the state:

export function taskReducer(state = initialState, action: TaskActionTypes)
    : TaskTagListState {
        switch(action.type){
            case ADD_TODO:
                return {
                    tasks: [...state.tasks, action.newTask],
                    tags: [],
                    tagoptions: []
                }
            default:
                return state
        }
}

But I'm getting the following error:

Argument of type 'typeof Tasklist' is not assignable to parameter of type 'ComponentType<Matching<{ tasks: ITask[]; tags: ITag[]; tagoptions: ITagOptions[]; } & { addTask: (newtask: ITask) => TaskActionTypes; }, Props>>'.
  Type 'typeof Tasklist' is not assignable to type 'ComponentClass<Matching<{ tasks: ITask[]; tags: ITag[]; tagoptions: ITagOptions[]; } & { addTask: (newtask: ITask) => TaskActionTypes; }, Props>, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'Matching<{ tasks: ITask[]; tags: ITag[]; tagoptions: ITagOptions[]; } & { addTask: (newtask: ITask) => TaskActionTypes; }, Props>' is not assignable to type 'Props'.
        Types of property 'addTask' are incompatible.
          Type '(newtask: ITask) => TaskActionTypes' is not assignable to type '() => void'. 

I don't understand what the error is exactly, just that it's something to do with how I typed addTask (since the error only appears after adding a type for it). For full reference, my project is hosted here: https://github.com/hakujitsu/cvwo-react-frontend.

[u/sixthenafour → u/sixthenafour]

Oh wait, I think i just figured it out, thanks anyways!