I'm learning react and trying to show alert msg on the change of dark to light and light to dark mode. I have tried this code and I'm not able to solve this error. I have given toggle button for dark mode and light mode that is working fine but when I'm using null in useState(null) I'm getting error on alert.js page on line 7

Alert.js:7 
        
       Uncaught TypeError: Cannot read properties of null (reading 'type')
    at Alert (Alert.js:7:1)

This is my App.Js page

`

import './App.css';
import React, { useState } from 'react';
import About from './components/About';
import Navbar from './components/Navbar';
import TextForm from './components/TextForm';
import Alert from './components/Alert';

function App() {
  const [mode, setMode] = useState('light'); //to set initial mode to light
  const [alert, setAlert] = useState(null);

  const showAlert = (message, type) => {
    setAlert({
      message: message,
      type: type,
    })
  }

  const toggleMode = () => {
    if (mode === 'dark') {
      document.body.style.backgroundColor = '#fff';
      showAlert("Dark mode has been enabled", "success");
      setMode('light');
    } else {
      document.body.style.backgroundColor = '#06213d';
      showAlert("Light mode has been enabled", "success");
      setMode('dark')
    }

  }
  return (
    <>
      <Navbar title="Text Utils" mode={mode} toggleMode={toggleMode} />
      <Alert alert={alert} />
      <div className='container my-3'>
        <TextForm heading='Enter the text to analyze below' mode={mode} />
        <About mode={mode}></About>
      </div>
    </>
  );
}

export default App;

` This is my Alert.js Page

`

import React from 'react'

function Alert(props) {
    return (
        <div>
             <div className="alert alert-warning alert-dismissible fade show" role="alert">
             props.alert && <strong>{props.alert.type}</strong>: {props.alert.msg}
                <button type="button" className="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    )
}

export default Alert

`

I tried solutions from google but dose not work. Is there any way to solve the issue.

CodePudding user response：

Initially alert state is null, so it can't read props.alert.type. You can use optional chaining when reading or you can initialize the state with null values.

props.alert?.type

or

const [alert, setAlert] = useState({
  message: null,
  type: null,
});

CodePudding user response：

You pass object alert in your Alert, component, this component include field type and message. You are using props.alert.msg, but object alert don`t have field msg.

Try props.alert.message.

And in App component when you define state alert, initial state better set as object

const [alert, setAlert] = useState({message: null, type: null}).