My goal is to set the initial value of a variable and then place it in the code directly using curly braces.

As my app gets rendered I see the following error in the browser TypeError: Cannot read properties of undefined (reading 'value').

How else am I supposed to do it if not with the use of a conditional statement? The line is as follows:

let dateContent = document.getElementsByClassName('email')[1].value !== undefined ? document.getElementsByClassName('email')[1].value : 'Your date will show up here when you submit it.';

I wanted to tackle this problem wrapping the declaration, and previously a function as well, in a try...catch block. However, after logging the error message to the console, lines reading the value would stop working. I have a component that looks this way:

import Name from "../items/Name";
import Contact from "../items/Contact";
import Button from "../items/Button";

import { refresh } from '../libraries/mamaia';

const Mobile = () => {
    let dateContent = document.getElementsByClassName('email')[1].value !== undefined ? document.getElementsByClassName('email')[1].value : 'Your date will show up here when you submit it.';

    return (
        <div className="mobile-container">
            <header className="fixed-header" onClick={refresh}><Name /></header>
            <main className="mobile-content">
                <article className="contact-form-container">
                    <Contact 
                        firstInput='What is this event?'
                        secondInput='When does it start?'
                        secondInputType = 'date'
                        thirdInput='What additional information do you have?'
                    />
                    <span>
                        <Button message="Set a Countdown!" />
                    </span>
                </article>
                <article className="saved-countdowns">
                    <h1 className="heading"></h1>
                    <p className="description"></p>
                    <p className="description"></p>
                    <section className="btn-container">
                        <button className="arrow-btn">
                            <i className="fas fa-long-arrow-alt-left"></i>
                        </button>
                        <button className="arrow-btn">
                            <i className="fas fa-long-arrow-alt-right"></i>
                        </button>
                    </section>
                </article>
            </main>
        </div>
    )
}

export default Mobile; 

It gets rendered via router in the index.js file:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { render } from 'react-snapshot';
import './styles/index.min.css';

import React from 'react';
import reportWebVitals from './reportWebVitals';

import App from './App';
import Mobile from "./comps/Mobile";

render(
  <React.StrictMode>
    <Router>
      <App />
      <Switch>
        <Route exact path="/app" component={Mobile} />
      </Switch>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

What can I do to make this work?

CodePudding user response：

The error is saying that document.getElementsByClassName('email')[1] is undefined, not document.getElementsByClassName('email')[1].value. So you should do

let dateContent = document.getElementsByClassName('email')[1] !== undefined ? document.getElementsByClassName('email')[1].value : 'Your date will show up here when you submit it.';

CodePudding user response：

You could use the length property to avoid that error because you might access an empty slot in the array which raises this error.

let dateContent = document.getElementsByClassName('email').length > 1 && document.getElementsByClassName('email')[1].value ? document.getElementsByClassName('email')[1].value : 'Your date will show up here when you submit it.';