Why is props sent from parent component become object in child component?-CodePudding

I'am implementing a language translation system for my React app and I'm stuck on displaying the languages flags as Modal when the user click on the tranlation icon, which should display the list of languages to tranlate to. I have a LanguageModal.jsx child component which is a Modal triggered from NavigationBar.jsx parent component. These are the two components:

// Languagemodal.jsx
import React from 'react';
import './languageModal.css';
import en from '../../assets/flags/US.png';
import de from '../../assets/flags/DE.png';
import fr from '../../assets/flags/FR.png';

const languageModal = (show) => (show
  ? (
    <div className="Modal">
      <div className="Modal-content">
        <div className="Modal-body">
          <div><img src={en} alt="english" /></div>
          <div><img src={de} alt="deutsch" /></div>
          <div><img src={fr} alt="francais" /></div>
        </div>
      </div>
    </div>
  ) : (null));
export default languageModal;

// NavigationBar.jsx
import React, { useState, useEffect } from 'react';
import { FaGlobe } from 'react-icons/fa';
import logo from '../../assets/logodidi.png';
import Modal from '../LanguageModal/languageModal.jsx';
import './navigationBar.css';

const NavigationBar = () => {
  const [toggleBar, setToggleBar] = useState(false);
  const [show, setShow] = useState(false);
  useEffect(() => {
    setShow(show);
  }, [show]);
  return (
    <div className="navbar">
      <div id="max-width">
        <div className="navbar-items">
          <div className="navbar-items_container">
            <p><a href="#home">home</a></p>
            <p><a href="#usage">Usage</a></p>
            <p><a href="#Categories">Categories</a></p>
            <p><a href="#Blogs">Blogs</a></p>
          </div>
        </div>
        <div className="navbar-sign">
          <p><FaGlobe color="#2b74b7" onClick={() => (setShow(true))} /></p>
          <languageModal show={show} />
          <button type="button">Get started</button>
        </div>
      </div>
    </div>
  );
};

export default NavigationBar;

The expected behavior is to display only when the user cliks on the FaGlob icon. The problem is that the Modal is automatically displayed without a click. so I set the variable "show" with React hook useState and useEffect to manage show/hide the Modal but not to avail, the Modal is always being displayed anyway. When I check the "show" value with docuemnt.write(show) I saw that it is "false" in the parent component but it gives [object object] in the languageModal child component. When I change the "show" initial value it doesn't take any effect inside the child languageModal component unless I manualy change it inside it by changing the

const languageModal = (show) => (show
  ? ( ... )

const languageModal = (show) => (!show
  ? (...)

And that is the weird point. Why the child component doesn't receive the value passed to it? Where is it taking the default value [object object] from, since "show" isn't an object but a boolean ? How to solve it then. Your help is very appreciated. I can't go forth whithout your help.

CodePudding user response：

You are destructuring show incorrectly. Update it as:

const languageModal = ({show}) => (show
  ? (
    <div className="Modal">
      <div className="Modal-content">
        <div className="Modal-body">
          <div><img src={en} alt="english" /></div>
          <div><img src={de} alt="deutsch" /></div>
          <div><img src={fr} alt="francais" /></div>
        </div>
      </div>
    </div>
  ) : (null));
export default languageModal;

CodePudding user response：

When you write show like that, show will be props. That is why it is an object. If you want to extract a particular property, you can either do props.show or use destructuring in the functional component like this {show}


const languageModal = ({show}) => (show
  ? (
    <div className="Modal">
      <div className="Modal-content">
        <div className="Modal-body">
          <div><img src={en} alt="english" /></div>
          <div><img src={de} alt="deutsch" /></div>
          <div><img src={fr} alt="francais" /></div>
        </div>
      </div>
    </div>
  ) : (null));