Skip to main content

como ¿Cómo acceder a las propiedades del store?

No logro acceder a las props del state, lo que intento hacer es que muestre o no una barra de navegación en función de si una propiedad esta en false o true. cuando

Cuando intento acceder a la propiedad showMainHeadershowMainHeader de esta forma this.props.config.showMainHeaderthis.props.config.showMainHeader me da el siguiente error: Property 'config' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>', no se si tengo que declararlo de alguna forma antes.El console log muestra lo siguiente por si es de utilidad: {config: {…}, dispatch: ƒ} config: {moduleId: 'HOME_MODULE', showMainHeader: false, showDetailHeader: true, detailTitle: 'Actualidad!'} dispatch: ƒ (action) [[Prototype]]: Object

Property 'config' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>', no se si tengo que declararlo de alguna forma antes.El console log muestra lo siguiente por si es de utilidad: {config: {…}, dispatch: ƒ}
config: {moduleId: 'HOME_MODULE', showMainHeader: false, showDetailHeader: true, detailTitle: 'Actualidad!'}
dispatch: ƒ (action)
[[Prototype]]: Object

como acceder a las propiedades del store?

No logro acceder a las props del state, lo que intento hacer es que muestre o no una barra de navegación en función de si una propiedad esta en false o true. cuando intento acceder a la propiedad showMainHeader de esta forma this.props.config.showMainHeader me da el siguiente error: Property 'config' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>', no se si tengo que declararlo de alguna forma antes.El console log muestra lo siguiente por si es de utilidad: {config: {…}, dispatch: ƒ} config: {moduleId: 'HOME_MODULE', showMainHeader: false, showDetailHeader: true, detailTitle: 'Actualidad!'} dispatch: ƒ (action) [[Prototype]]: Object

¿Cómo acceder a las propiedades del store?

No logro acceder a las props del state, lo que intento hacer es que muestre o no una barra de navegación en función de si una propiedad esta en false o true.

Cuando intento acceder a la propiedad showMainHeader de esta forma this.props.config.showMainHeader me da el siguiente error:

Property 'config' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>', no se si tengo que declararlo de alguna forma antes.El console log muestra lo siguiente por si es de utilidad: {config: {…}, dispatch: ƒ}
config: {moduleId: 'HOME_MODULE', showMainHeader: false, showDetailHeader: true, detailTitle: 'Actualidad!'}
dispatch: ƒ (action)
[[Prototype]]: Object
Origen Enlace

como acceder a las propiedades del store?

No logro acceder a las props del state, lo que intento hacer es que muestre o no una barra de navegación en función de si una propiedad esta en false o true. cuando intento acceder a la propiedad showMainHeader de esta forma this.props.config.showMainHeader me da el siguiente error: Property 'config' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>', no se si tengo que declararlo de alguna forma antes.El console log muestra lo siguiente por si es de utilidad: {config: {…}, dispatch: ƒ} config: {moduleId: 'HOME_MODULE', showMainHeader: false, showDetailHeader: true, detailTitle: 'Actualidad!'} dispatch: ƒ (action) [[Prototype]]: Object

import React, { Component } from 'react'
import { Fragment } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { connect } from 'react-redux'

const navigation = [
  { name: 'Inicio', href: '#', current: true },
  { name: 'Colegio', href: '#', current: false },
  { name: 'Documentos', href: '#', current: false },
  { name: 'Mi perfil', href: '#', current: false },
]

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

function mapStateToProps(state) {
    const { configNavigation } = state
    return { config: configNavigation }
  }
  

  class  Navigation extends Component {
      constructor (props) {
        super(props);
        this.state = { config: {} };
    } 
 
    render () {
        console.log(this.props);
    return (
            <div>
                <nav className="md:bg-white bg-teal-600 w-100 md:shadow fixed w-full z-20 top-0 left-0">
                <div className="mx-auto max-w-100 px-4 sm:px-6 lg:px-8">
                    <div className="relative flex h-16 items-center justify-between">
                    
                    <div className="flex flex-1 items-center justify-start sm:items-stretch sm:justify-start">
                        <div className="flex flex-shrink-0 items-center">
                        {/* Phone logo */}
                        {/* <img className="block h-9 w-auto md:hidden" src="../logo-icofcv-white.svg" alt="Ilustre Colegio Oficial de Fisioterapeutas Comunidad Valenciana" /> */}
                        {/* Desktop logo */}
                        <img className="hidden h-9 w-auto md:block" src="../logo-icofcv.svg" alt="Ilustre Colegio Oficial de Fisioterapeutas Comunidad Valenciana" />
                        </div>
                        <div className="hidden sm:ml-6 md:block">
                        <div className="flex space-x-1 desktop-navigation">
                            <ul className="flex bg-white md:flex-row md:space-x-4 md:mt-0 md:text-sm md:font-medium">
                                <li>
                                    <a href="/#/" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium active" aria-current="page">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <polyline points="5 12 3 12 12 3 21 12 19 12" />
                                            <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                                            <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                                        </svg>
                                    Inicio</a>
                                </li>
                                <li>
                                    <a href="/#/college" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <line x1="3" y1="21" x2="21" y2="21" />
                                            <path d="M5 21v-14l8 -4v18" />
                                            <path d="M19 21v-10l-6 -4" />
                                            <line x1="9" y1="9" x2="9" y2="9.01" />
                                            <line x1="9" y1="12" x2="9" y2="12.01" />
                                            <line x1="9" y1="15" x2="9" y2="15.01" />
                                            <line x1="9" y1="18" x2="9" y2="18.01" />
                                        </svg>
                                    Colegio</a>
                                </li>
                                <li>
                                    <a href="/#/docs" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <path d="M15 3v4a1 1 0 0 0 1 1h4" />
                                            <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
                                            <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
                                        </svg>
                                    Documentación</a>
                                </li>
                                <li>
                                    <a href="/#/profile" className="flex items-center text-neutral-500 hover:text-teal-600 active:text-teal-600 px-3 py-2 text-sm font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 stroke-neutral-500 hover:stroke-teal-600" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                            <circle cx="12" cy="7" r="4" />
                                            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                                        </svg>
                                    Mi perfil</a>
                                </li>
                            </ul>
                        </div>
                        </div>
                    </div>
                    <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
                        <ul className="items-center hidden md:flex">
                            <li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
                                <a href="https://twitter.com/Icofcv" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-twitter" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
                                </svg>
                                </a>
                            </li>
                            <li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
                                <a href="https://www.youtube.com/channel/UCYDxDmCQ_xfzk0ZnAkMt2WQ?view_as=subscriber" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-youtube" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <rect x="3" y="5" width="18" height="14" rx="4" />
                                    <path d="M10 9l5 3l-5 3z" />
                                </svg>
                                </a>
                            </li>
                            <li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
                                <a href="https://www.instagram.com/icofcv/" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-instagram" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <rect x="4" y="4" width="16" height="16" rx="4" />
                                    <circle cx="12" cy="12" r="3" />
                                    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
                                </svg>
                                </a>
                            </li>
                            <li className="mx-0.5 rounded-full bg-teal-600 h-8 w-8 flex items-center justify-center">
                                <a href="https://www.facebook.com/colegiofisioterapeutascv" target="_blank">
                                <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-brand-facebook" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
                                </svg>
                                </a>
                            </li>
                        </ul>
                    </div>
                    </div>
                </div>
                </nav>
                
                {/* Navegación móvil */}

                { 
                   this.props.config.showMainHeader === false ?

                     <div className="fixed bottom-0 w-100 h-14 flex justify-around items-center d-none bg-white nav-phone pt-2 z-10">
                    <a href="/#/" className="flex flex-column items-center active">
                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <polyline points="5 12 3 12 12 3 21 12 19 12" />
                            <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                            <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                        </svg>
                        <span className="btm-nav-label">Inicio</span>
                    </a>
                    <a href="/#/college" className="flex flex-column items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <line x1="3" y1="21" x2="21" y2="21" />
                            <path d="M5 21v-14l8 -4v18" />
                            <path d="M19 21v-10l-6 -4" />
                            <line x1="9" y1="9" x2="9" y2="9.01" />
                            <line x1="9" y1="12" x2="9" y2="12.01" />
                            <line x1="9" y1="15" x2="9" y2="15.01" />
                            <line x1="9" y1="18" x2="9" y2="18.01" />
                        </svg>
                        <span className="btm-nav-label">Colegio</span>
                    </a>
                    <a href="/#/docs" className="flex flex-column items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M15 3v4a1 1 0 0 0 1 1h4" />
                            <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
                            <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
                        </svg>
                        <span className="btm-nav-label">Documentación</span>
                    </a>
                    <a href="/#/profile" className="flex flex-column items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <circle cx="12" cy="7" r="4" />
                            <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                        </svg>
                        <span className="btm-nav-label">Mi perfil</span>
                    </a>
                </div>
                :
                <div className="fixed bottom-0 w-100 h-14 flex justify-around items-center md:hidden bg-white nav-phone pt-2 z-10">
                <a href="/#/" className="flex flex-column items-center active">
                    <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-home mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <polyline points="5 12 3 12 12 3 21 12 19 12" />
                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                        <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
                    </svg>
                    <span className="btm-nav-label">Inicio</span>
                </a>
                <a href="/#/college" className="flex flex-column items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-building-skyscraper mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <line x1="3" y1="21" x2="21" y2="21" />
                        <path d="M5 21v-14l8 -4v18" />
                        <path d="M19 21v-10l-6 -4" />
                        <line x1="9" y1="9" x2="9" y2="9.01" />
                        <line x1="9" y1="12" x2="9" y2="12.01" />
                        <line x1="9" y1="15" x2="9" y2="15.01" />
                        <line x1="9" y1="18" x2="9" y2="18.01" />
                    </svg>
                    <span className="btm-nav-label">Colegio</span>
                </a>
                <a href="/#/docs" className="flex flex-column items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-files mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M15 3v4a1 1 0 0 0 1 1h4" />
                        <path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z" />
                        <path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
                    </svg>
                    <span className="btm-nav-label">Documentación</span>
                </a>
                <a href="/#/profile" className="flex flex-column items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-user mx-2 h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="#737373" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <circle cx="12" cy="7" r="4" />
                        <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                    </svg>
                    <span className="btm-nav-label">Mi perfil</span>
                </a>
            </div>
                }
            </div>
               


    )
   }
}


export default connect(mapStateToProps)(Navigation)