Function runs before click?

Function runs before click?

I am trying to not write this function for every section and modularize it by passing in a string (the ID of the section), however, the function seems to run before the click. The section comes back as ‘projects’ if I console it out, but this is before the click and an error pops up: “TypeError: Cannot read property ‘scrollIntoView’ of null”

Any idea how I can make this work? (Ignore the inline styling.)

import React from 'react'

const Navbar = () => {

  const scrollToSection = (section) => {
    document.getElementById(section).scrollIntoView({ behavior: "smooth" })

  return (
        display: 'flex',
        justifyContent: 'space-evenly',
        cursor: 'pointer',
        <span onClick={scrollToSection('projects')}>Portfolio</span>

export default Navbar

This should be onClick={() => scrollToSection('projects')}

You can read more about this here

Ahh geez, been a long day.