Hide component and set cookie when button clicked, using next-cookie in React

JavaScript
1

I have inherited a React project using Next.js and Hooks and have been tasked with creating a component which contains ‘close’ button. When clicked the close button should hide the component and set a cookie to prevent it from being shown again. I have zero experience with React so forgive me if this is a simple problem - I’m just struggling to reconcile the docs against the codebase in front of me.

The component I’ve created is like this:

import { useCookie } from 'next-cookie'
import React, { useState } from 'react'
import { Button } from '_atoms';
import styles from './MessageBanner.module.scss';

export interface IContent {
  heading: string;
  body: string;
  button: IButton;
}

export interface IProps {
  content: IContent;
}

const MessageBanner = ({ content }: IProps) => {

  const { heading, body, button } = content;

  function handleClick() {
    console.log('Close button clicked');
  }

  return (
    <div className={styles.root}>
      <div className={styles.content}>
        <h3>{ content.heading }</h3>
        <div>{ content.body }</div>
        {button && (
          <Button
            target={button.target}
            text={button.text}
            prominence="primary"
            animated={false} /> 
        )}
        <button onClick={handleClick}>Close</button>
      </div>
    </div>
  );
}

export default MessageBanner;

Note, the project uses next-cookie elsewhere, hence I’ve imported it here, but elsewhere it’s used in a more complex scenario so I can’t follow how it works. At the moment I have it so the button is doing a successful console.log but I’m now unsure how to get something like the ‘Hooks’ example on the next-cookie docs to set a cookie and hide the component.

Could anyone advise how to approach this please?

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.