Develop Reference

Calling data from the API for child component in Next.js

I am working on a header component. Here is the code:
import style from '../../styles/header.css';
import '../../styles/globals.css';
export default function Header({data}){
const [showMe, setShowMe] = useState(false);
function toggle(){
console.log("toggle")
setShowMe(!showMe);
}
return(
<>
<div className="header">
<div className="web-header">
<div className="first-header">
<div className="info-strip">
<ul>
<li>
Contact Us
</li>
<li>
7 Day Returns
</li>
<li>
Track Order
</li>
<li>
Return Order
</li>
<li>
Survey
</li>
</ul>
</div>
<div className="right-block d-flex">
<div className="login">
<span className="image"></span>
<span className="text">Log In
<div className="account-box">
</div>
</span>
</div>
<div className="cart">
<span className="cart-image">
</span>
<span className="text">Cart</span>
</div>
</div>
</div>
<div className="second-header">
<div className="header-logo">
<img src="https://www.mirraw.com/assets/logo-red.png" />
</div>
<div className="search">
<input placeholder="Search Something.." />
<button></button>
</div>
</div>
<div className="third-header">
<div className="container-fluid">
<ul className="menu">
{data.menus.map((post, index) => {
return (
<li className="menu-list">
{post.title}
<div className="megabox">
<ul className="wrapper">
{post.menu_columns.map((subItems, sIndex) => {
return <li>
<span className="menu-link">
{subItems.title}
</span>
<ul className="category">
{subItems.menu_items.map((x) => {
return <li>
{x.title}
</li>
})}
</ul>
</li>;
})}
</ul>
</div>
</li>)})}
</ul>
</div>
</div>
</div>
<div className="mobile-screen">
<div className="mobile-header">
<div className="mobile-menu">
<div className="menu-icon">
<div className="wrapper">
<input type="checkbox" id="navigation" />
<label for="navigation">
+
</label>
<div className="right-card">
<img src="https://www.mirraw.com/assets/logo-red.png" />
<p className="app-install">
<span>Download app</span>
</p>
<div className="cart">
<span className="cart-image"></span>
{/* <span className="text">Cart</span> */}
</div>
</div>
<nav>
<ul>
<li className="menu-heading">
<span>Menu</span>
<span>
<label for="navigation">X</label>
</span>
</li>
{data.menus.map((post, index) => {
return (
<li className="menu-list">
{post.title} <span onClick={toggle}>+</span>
<ul style={{display: showMe?"block":"none"}} className="category-one">
{post.menu_columns.map((subItems, sIndex) => {
return <li>
{subItems.title}
<span>+</span>
<ul className="category-two">
{subItems.menu_items.map((x) => {
return <li>
{x.title}
</li>
})}
</ul>
</li>;
})}
</ul>
</li>)})}
</ul>
</nav>
</div>
</div>
</div>
<div className="scroll-menu-list">
<ul className="mb-0">
{data.menus.map((post, index) => {
return (
<li className="menu-list">{post.title}</li>
)})}
</ul>
</div>
</div>
</div>
</div>
</>
)
}
export async function getServerSideProps() {
// Fetch data from external API
const res = await fetch(`https://api.mirraw.com/api/v1/menu`);
const data = await res.json();
// Pass data to the page via props
return { props: { data } }
}
Code is working fine if I render this page only, but when I import this component in other component, it threw error:
Server Error
TypeError: Cannot read property 'menus' of undefined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
What could be the approach of getting value from the API for child component?

getServerSideProps can only be used within page components, which is why it works when you render this component as a page.
If you want to this to be a reusable component that can be called from other components and/or pages you'll need to pass the data you get at the page level (from getServerSideProps, for instance) down to it.
// pages/index.js
import Header from "../components/header"
export default function IndexPage({ data }) {
return (
<Header data={data} />
)
}
export async function getServerSideProps() {
const res = await fetch(`https://api.mirraw.com/api/v1/menu`);
const data = await res.json();
return { props: { data } }
}

how to get value from dropdown list in react?

class Navbar extends Component {
state = {};
getLink = (e) => {
const select = document.getElementById("drpdwn");
console.log(select.value);
};
render() {
return (
<>
<div className="container">
<nav className="navbar navbar-dark bg-primary">
<div
id="drpdwn"
onClick={() => this.getLink()}
className="dropdown"
>
<span className="dropbtn">Dropdown</span>
<div className="dropdown-content">
<a value="link1" href="#">
Link 1
</a>
<a value="link2" href="#">
Link 2
</a>
<a value="link3" href="#">
Link 3
</a>
</div>
</div>
</nav>
</div>
</>
);
}
}
export default Navbar;
All I want is whenever a user selects any link such as Link 1,2 or 3 I just want to get the value as simple as that. but all I'm getting is undefined. any suggestions??

You can change the code like this and use tags instead of and then tags.
import React, { Component } from "react";
class Navbar extends Component {
state = {};
getLink = (e) => {
const changeValue = e.target.value
console.log(changeValue )
};
render() {
return (
<>
<div className="container">
<nav className="navbar navbar-dark bg-primary">
<select
id="drpdwn"
onChange={(e) => this.getLink(e)}
className="dropdown"
>
<option value="link1" href="#">
Link 1
</option>
<option value="link2" href="#">
Link 2
</option>
<option value="link3" href="#">
Link 3
</option>
</select>
</nav>
</div>
</>
);
}
}
export default Navbar;

First, remove the anonymous function inside your onClick, like this :
onClick={this.getLink}
This will automatically pass the event into your function, so (e) will be defined. This is the equivalent of doing :
onClick={(e) => this.getLink(e)}
Once you've done that, you must recover the value inside the event in your function.
getLink = (e) => {
const value = e.target.value;
console.log(value);
};

I notice you want to create a navbar with a dropdown list
class Navbar extends Component {
render() {
return (
<>
<div className="container">
<nav className="navbar navbar-dark bg-primary">
<div
id="drpdwn"
onClickCapture={(e) => {
e.preventDefault();
// e.target which is the target you click within this div
console.log(e.target);
}}
className="dropdown"
>
<span className="dropbtn">Dropdown</span>
<div className="dropdown-content">
<a href="/">
Link 1
</a>
<a href="/">
Link 2
</a>
<a href="/">
Link 3
</a>
</div>
</div>
</nav>
</div>
</>
);
}
}

This is how you can do it.
import React, { Component } from "react";
class Navbar extends Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
getLink = ({ target }) => {
if (target.tagName.toLowerCase() === "a") {
console.log(target.getAttribute("value"));
}
};
render() {
return (
<>
<div className="container">
<nav className="navbar navbar-dark bg-primary">
<div id="drpdwn" onClick={this.getLink} className="dropdown">
<span className="dropbtn">Dropdown</span>
<div className="dropdown-content">
<a value="link1" href="#">
Link 1
</a>
<a value="link2" href="#">
Link 2
</a>
<a value="link3" href="#">
Link 3
</a>
</div>
</div>
</nav>
</div>
</>
);
}
}
export default Navbar;
You may try the demo in codesandbox
https://codesandbox.io/s/gettingthevalue-yeqoi

Mapping nested array inside mapped array in React JSX

I'm trying to write a dashboard sidebar which has a couple of "primary" buttons which (via Bootstrap) collapse a number of "secondary" buttons. I want to be able to easily update and style the whole thing so writing static markup is out of the picture. Here is one object out of the array:
const menuArray = [
{
primaryText: "Applications",
primaryIcon: "fa fa-rocket",
primaryURL: "/applications",
secondaries: [
{
secondaryText: "Softwares",
secondaryURL: "/softwares",
},
{
secondaryText: "Videogames",
secondaryURL: "/videogames",
},
{
secondaryText: "Tools",
secondaryURL: "/tools",
},
],
},
]
And here is the function rendering the array which i'm simply calling in the JSX markup by {renderMenuArray}
const renderMenuArray = menuArray.map((menuItem) => (
<li className="py-2">
<button
data-target={`#${menuItem.primaryText}Submenu`}
data-toggle="collapse"
aria-expanded="false"
className="btn btn-dark btn-menu btn-block pl-0 mb-1"
>
<Link to={menuItem.primaryURL}>
<span className="mr-3">
<i className={menuItem.primaryIcon}></i>
</span>
{menuItem.primaryText}
</Link>
</button>
<div
className="card-body collapse ml-5"
id={`${socialItem.primaryText}Submenu`}
>
<ul className="list-unstyled">
<li>
<Link className="small" to="/applications/softwares">
<span className="mr-3">
<i className="fa fa-chevron-right"></i>
</span>
Softwares
</Link>
</li>
</ul>
</div>
));
I can render the "primary" objects with no problem at all, but I want each "primary" object ( each iteration of the parent array) to each iterate through the count of "secondaries" array ( which is going to be different for each "primary" object).
I'm a beginner developer.

The object passed into the callback function for the map, menuItem has the included property secondaries. You can use map on this property since secondaries is an array, simply place the map inside of your JSX.
<div
className="card-body collapse ml-5"
id={`${socialItem.primaryText}Submenu`}
>
<ul className="list-unstyled">
{menuItem.secondaries.map((subItem) => {
...
})
</ul>
</div>
P.S. you forgot to close your last div tag, and you have a second </li> instead of a </ul>

This'll work (made it a bit more functional, to give you an example of what's possible with functional React components)
const menuArray = [
{
primaryText: "Applications",
primaryIcon: "fa fa-rocket",
primaryURL: "/applications",
secondaries: [
{
secondaryText: "Softwares",
secondaryURL: "/softwares"
},
{
secondaryText: "Videogames",
secondaryURL: "/videogames"
},
{
secondaryText: "Tools",
secondaryURL: "/tools"
}
]
}
];
export default function App(props) {
function renderSecondaryMenu(items) {
return items.map(secondaryItem => {
return (
<li>
<Link className="small" to={secondaryItem.secondaryURL}>
<span className="mr-3">
<i className="fa fa-chevron-right" />
</span>
{secondaryItem.secondaryText}
</Link>
</li>
);
});
}
function renderMenuArray() {
return menuArray.map(menuItem => {
return (
<li className="py-2">
<button
data-target={`#${menuItem.primaryText}Submenu`}
data-toggle="collapse"
aria-expanded="false"
className="btn btn-dark btn-menu btn-block pl-0 mb-1"
>
<Link to={menuItem.primaryURL}>
<span className="mr-3">
<i className={menuItem.primaryIcon} />
</span>
{menuItem.primaryText}
</Link>
</button>
<div
className="card-body collapse ml-5"
id={`${menuItem.primaryText}Submenu`}
>
<ul className="list-unstyled">
{renderSecondaryMenu(menuItem.secondaries)}
</ul>
</div>
</li>
);
});
}
return <div className="App">{renderMenuArray()}</div>;
}

I don't think you gain a lot from defining the sidebar as an object, unless you are using the same Sidebar component with different sets of buttons and you wanna be able to switch between them. JSX is already a markup language, so it's declarative.
You could define simply the Sidebar as
const Sidebar = () => (
<PrimaryItem text="Applications" icon="fa fa-rocket" url="/applications">
<SecondaryItem text="Softwares" url="/softwares" />
<SecondaryItem text="Videogames" url="/videogames" />
<SecondaryItem text="Tools" url="/tools" />
</PrimaryItem>
)
And then implement each component as you need to display them. I think this is cleaner and easier to maintain and modify.

How do I return to previous state in reactjs?

I have created a sidebar component and set its state to false to hide the block until a user clicks on the hanmburger icon, then the state is shown. However I am trying to return(or close the sidebar menu) when the user clicks on the close 'X' icon. I have written a hideMenu method to return the state to false however it doesnt work, and there are no errors.
Here is what I have written
class SubMainNavbar extends React.Component{
constructor(){
super();
this.state = {isShown:false}
this.showMenu = this.showMenu.bind(this)
this.hideMenu = this.hideMenu.bind(this)
}
showMenu(){
this.setState({isShown: true})
}
hideMenu(){
this.setState({isShown: false})
}
render() {
return (
<div className="sub-flex-container">
<div className="co pt-4">
<ul className="flex-container sub-list">
<li>women</li>
<li>mens</li>
<li>health & beauty</li>
</ul>
<span onClick={this.showMenu} className="pl-3 hamburger hide-big pb-4"><Icon type="menu" />
<div className="mobile-menu-display" id="mySidebar" style={{display: this.state.isShown ? 'block' : 'none' }}>
<span onClick={this.hideMenu} className="float-right font-weight-bold hide-big close">X</span>
</div>
</span>
</div>
<div className="co">
{/* <Logo className="logo" /> */}
<img className="img-fluid logo" src={Logo} alt="losode logo"/>
</div>
<div className="co pt-4">
<span className="hide-small"><SearchInput /></span>
<div className="icon-mobile hide-big">
<ul className="flex-icon sub-flex-container">
<li><ion-icon name="search-outline"></ion-icon></li>
<li><ion-icon name="person-outline"></ion-icon></li>
<li><ion-icon name="basket-outline"></ion-icon></li>
</ul>
</div>
</div>
</div>
);
}
};
export default SubMainNavbar

You didn't close your tags properly. update your code as per below:
<div className="sub-flex-container">
<div className="co pt-4">
<ul className="flex-container sub-list">
<li>women</li>
<li>mens</li>
<li>health & beauty</li>
</ul>
<span onClick={this.showMenu} className="pl-3 hamburger hide-big pb-4"><Icon type="menu" /></span>
<div className="mobile-menu-display" id="mySidebar" style={{display: this.state.isShown ? 'block' : 'none' }}>
<span onClick={this.hideMenu} className="float-right font-weight-bold hide-big close">X</span>
</div>
</div>
<div className="co">
...

Your span, which you click to hide the menu, is inside the span, which triggers the showMenu function. You need to call the hideMenu function with the event parameter and use the stopPropagation function in your hideMenu function before setting the state. So the click of the span outside is not triggert and just the inner span will receive the click.
class SubMainNavbar extends React.Component{
constructor(){
super();
this.state = {isShown:false}
this.showMenu = this.showMenu.bind(this)
this.hideMenu = this.hideMenu.bind(this)
}
showMenu(){
this.setState({isShown: true})
}
hideMenu(event){
event.stopPropagation()
this.setState({isShown: false})
}
render() {
return (
<div className="sub-flex-container">
<div className="co pt-4">
<ul className="flex-container sub-list">
<li>women</li>
<li>mens</li>
<li>health & beauty</li>
</ul>
<span onClick={this.showMenu} className="pl-3 hamburger hide-big pb-4"><Icon type="menu" />
<div className="mobile-menu-display" id="mySidebar" style={{display: this.state.isShown ? 'block' : 'none' }}>
<span onClick={event => this.hideMenu(event)} className="float-right font-weight-bold hide-big close">X</span>
</div>
</span>
</div>
<div className="co">
{/* <Logo className="logo" /> */}
<img className="img-fluid logo" src={Logo} alt="losode logo"/>
</div>
<div className="co pt-4">
<span className="hide-small"><SearchInput /></span>
<div className="icon-mobile hide-big">
<ul className="flex-icon sub-flex-container">
<li><ion-icon name="search-outline"></ion-icon></li>
<li><ion-icon name="person-outline"></ion-icon></li>
<li><ion-icon name="basket-outline"></ion-icon></li>
</ul>
</div>
</div>
</div>
);
}
};
export default SubMainNavbar
ps: You can use arrow functions so you don't need to use a constructor.
For example:
this.state = { isShown: false }
showMenu = () => {
this.setState({isShown: true})
}
hideMenu = event => {
event.stopPropagation()
this.setState({isShown: false})
}

You need to ensure that the event is not passed again to the outer container.
In your case the event is triggered by the inner element which leads to a hideMenu but afterward the event is propagated to the outer container which leads to a recall of showMenu.
Additional reading about the can be found here:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
https://www.w3schools.com/jsref/event_stoppropagation.asp
Seems like Padi Dev also found the problem before me :)

really weird but could you try imitating what I did in this code sandbox?
https://codesandbox.io/s/heuristic-fire-2jp8n?fontsize=14&hidenavigation=1&theme=dark
that should be as simple as it gets

react js onClick toggle class on different elements inside different components

i am fairly new to react and i am building an app that has 2 languages. you can switch between the languages from the navbar using Redux to handle the state. i have a json file where i stored the text for both languages and used onClick to switch between them. it works great on every component and every page.
however my problem is on some components where i am using map() and find() functions to get data from a different json file so i feel like i am forced to find another solution to switch languagse on these components and the simplest solution i could think of is to hide/show a class between two h1 for example one for english and one for arabic.
how can i make an onClick function on the navbar button that will change the language and also show/hide a class on other components not a child component in order to show one of the two languages?
this is the Navbar.js
import React, { Component } from 'react';
import { bubble as Menu } from 'react-burger-menu'
import { NavLink } from 'react-router-dom'
import './Navbar.css';
import '../../../data/content.json'
const Provider = require('react-redux').Provider;
const createStore = require('redux').createStore;
const content = require('../../../reducer');
class Navbar extends Component {
showSettings (event) {
event.preventDefault();
}
render() {
const data = this.props.data;
let switchLanguage = this.props.switchLanguage;
return (
<div>
<ul className="right hide-on-med-and-down language">
<li className="dropdown-button right"><a onClick={switchLanguage.bind(this,'en')} className="language-a">Eng</a></li>
<li className="dropdown-button right"><a onClick={switchLanguage.bind(this,'ar')} className="language-a">عربي</a></li>
<li className="right">
<p>CALL US: +905061162526</p>
</li>
</ul>
<i onClick={ this.showSettings } className="material-icons sidenav-trigger right">menu</i>
<Menu >
<img className="sidenav-logo" src="https://res.cloudinary.com/dd5e5iszi/image/upload/v1522222933/other/home-page-logo.png" alt="cayan group logo"/>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/">{data.home}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/projects">{data.projects}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/services">{data.services}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/about">{data.about}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="menu-item" exact to="/contact">{data.contact}</NavLink>
</li>
</Menu>
<div className="navbar-fixed">
<nav className="normal-nav">
<div className="nav-wrapper">
<img className="responsive-img" src="https://res.cloudinary.com/dd5e5iszi/image/upload/v1522221061/other/logo-nav.png" alt="cayan group logo"/>
<ul className="nav-links center hide-on-med-and-down">
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" exact to="/">{data.home}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/projects">{data.projects}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/services">{data.services}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/about">{data.about}</NavLink>
</li>
<li className="link-wrapper">
<NavLink activeClassName="selected" className="nav-link" to="/contact">{data.contact}</NavLink>
</li>
</ul>
</div>
</nav>
</div>
</div>
);
}
}
export default Navbar;
this is the where i want to hide/show a class. on some tags in want to show and hide one of them based on the language selected
import React, { Component } from 'react';
import Slider from 'react-slick';
import PRODUCTS from '../../Data/CarouselData.js';
import './ProjectsCarousel.css';
class ProjectsCarousel extends Component {
render() {
const data = this.props.data;
var settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
adaptiveHeight: true,
autoplay: false,
autoplaySpeed: 5000,
responsive:[
{ breakpoint: 400, settings: { slidesToShow: 1 } },
{ breakpoint: 1024, settings: { slidesToShow: 2 } }
]
};
return (
<div className="projetcsCarousel ">
<div className="containermy">
<div className="row">
<div className="container">
<h1 className="body-h1">PROJECTS</h1>
</div>
<div className="carousel">
<div className="left-btn col s1">
<p>PREV</p>
</div>
<Slider className="inner col s10" {...settings}>
{PRODUCTS.map((product)=>{
return (
<a key={product.id} href={'/products/'+product.id}>
<div className='wrapper'>
<div className={'carouselImages cayan-'+product.id}>
<h6>{'CAYAN'+product.id}</h6>
</div>
<div className="description">
<h6>Description</h6>
<h5>{product.priceMin + ' - ' + product.priceMax}</h5>
<p>{product.description}</p>
<p>{product.descriptionAr}</p>
</div>
<div className="project-info ">
<div className="col s6 project-info-icons left">
<i className="ion-ios-location-outline "></i>
<p>{product.location}</p>
<p>{product.locationAr}</p>
<br/>
<i className="ion-ios-home-outline"></i>
<p>{product.types}</p>
<br/>
<i className="ion-ios-photos-outline"></i>
<p>{product.area}</p>
<br/>
</div>
<div className="col s6 project-info-icons right">
<i className="ion-ios-pricetag-outline "></i>
<p>{product.installment} months installments</p>
<br/>
<i className="ion-ios-gear-outline"></i>
<p>{product.status}</p>
<br/>
<i className="ion-ios-cart-outline"></i>
<p>{product.deliveryDate}</p>
<br/>
</div>
<button className="more-details">MORE DETAILS</button>
</div>
</div>
</a>
)
})}
</Slider>
<div className="right-btn col s1">
<p>NEXT</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ProjectsCarousel;

This might resolve issue with multiple element class toggling.try this out:
https://jsfiddle.net/menomanabdulla/todu7m6g/11/
class ToggoleApp extends React.Component {
constructor(props) {
super(props)
this.state = {
}
this.toggleClass=this.toggleClass.bind(this);
}
toggleClass(e){
let classes = 'my-class';
let els = document.getElementsByClassName('my-class active');
if(els){
while (els[0]) {
els[0].classList.remove('active')
}
}
e.target.className = classes.replace('my-class','my-class active');
}
render() {
return (
<div>
<h2>Toggle Example</h2>
<ul>
<li className="my-class active" onClick={(e) =>this.toggleClass(e)}>
One
</li>
<li className="my-class" onClick={(e) =>this.toggleClass(e)}>
Two
</li>
<li className="my-class" onClick={(e) =>this.toggleClass(e)}>
Three
</li>
</ul>
</div>
)
}
}
ReactDOM.render(<ToggoleApp />, document.querySelector("#app"))
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.my-class{
color: #FF3355;
}
.my-class.active{
color: #33FF46;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

From what I understand from after reading the question is you have to toggle between the elements on click by changing the class.
The solution I propose is change a single variable value onClick and use the variable to show and hide for example:
let isEnglish = true;
<h1 style={ display: isEnglish ? block : hidden }>{'Welcome'}</h1>
<h1 style={ display: isEnglish ? none : block }>{'Welcome in Arabic'}</h1>