Develop Reference

How to import and export methods and libraries defined in one js file to the other js file in react project

My problem is, I have a js file having a functionality of opening a tab-bar on clicking. Here is the link of that js file https://jsfiddle.net/6719phr3/1/
I want the same feature of opening a tab-bar to be used in the other js file as well without adding the methods and functionalities again in that js file. The Code is here.
import React, { useState,useCallback } from "react";
import {Card,CardGroup,Badge} from 'react-bootstrap';
const Health_status = (props) => {
return (
<CardGroup>
<Card className="cards">
<Card.Body>
<Card.Title>Cluster-1 [ID]</Card.Title>
<Card.Text>
</Card.Text>
</Card.Body>
<Card border="secondary" style={{ width: '18rem' }} className ="sub-cards-rec">
<Card.Header>Recording Unit [ID]</Card.Header>
<Card.Body>
<Card.Title>[ID]</Card.Title>
<Card.Text>
<h6 onClick{()=>openPane()}><Badge pill bg="primary" >Cumulative Data Rate:{}</Badge></h6>
{css ? (<h6 onClick={toggle2}><Badge pill bg="success" >Cumulative Sensor Status:{}</Badge></h6>)
:(<h6 onClick={toggle2}><Badge pill bg="danger" >Cumulative Sensor Status:{}</Badge></h6>)
}
</Card.Text>
</Card.Body>
</Card><br />
<Card border="secondary" style={{ width: '18rem' }} className ="sub-cards-ana">
<Card.Header>Analysis Unit [ID]</Card.Header>
<Card.Body>
<Card.Title>[ID]</Card.Title>
<Card.Text>
<h6><Badge pill bg="warning" >Instance-Number:{}</Badge></h6>
</Card.Text>
</Card.Body>
</Card><br />
</Card>
</CardGroup>
}
export default Health_status;
So I want to add a tabbar on clicking <Card.Text> Cumulative Data Rate from the above given code. How to export and import the methods and libraries from the first js file to this js file.

React Navbar is not showing

I have been trying to put a Navbar into a React Project using reactstrap. But the Navbar is not showing just the h1 in the NavbarBrand is rendered for some reasons. I tried to change the css styling, copy and pasted other example Navbars from different websites and tried other kinda similar solutions from here but nothing worked. I am using React version 17.0.2 and reactstrap version 8.9.0.
This is my Navbar Component:
import React, { Component } from 'react';
import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem } from 'reactstrap';
//import { NavLink } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
isNavOpen: false
};
this.toggleNav = this.toggleNav.bind(this);
}
toggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen
});
}
render() {
return(
<Navbar bg="dark" variant="dark">
<div className="container">
<NavbarToggler onClick={this.toggleNav} />
<NavbarBrand href="/">
<h1>Navbar</h1>
</NavbarBrand>
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<p>Test</p>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
);
}
}
export default Header;
How the navbar looks
I am rather new to React and Javascript overall i hope someone can help me.

You have the isNavOpen in state set to false and your
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<p>Test</p>
</NavItem>
</Nav>
</Collapse>
depends upon isNavOpen state which expects to be true to be shown on the screen.
Try setting isNavOpen to true in the state.

Create a responsive React application that shows a list of cards in a container

I need to create a responsive React application using JavaScript that will show a list of cards on the page as pictured below. I'm fairly new to React and am not really sure where to begin with the layout. Currently, I have created a few reusable components for each portion of the app that I believe need to be added. These are the main container that will house every other component, the toolbar, sidebar, main card container that will house the cards in the center, and the footer. I'm not even sure if I need the main container component, maybe I can just use divs to house all the other components? Any tips? I can clarify and provide more details if needed. Thank you.

you can use css flex with inline-block,
index.js
import React from "react";
import "./style.css";
export default function App() {
return (
<div>
<div className="rowA col-md-4">
<div>A</div>
<div>B</div>
</div>
<div className="rowA clom-md-4">
<div>C</div>
<div>D</div>
</div>
<div className="rowA">
<div>E</div>
<div>F</div>
</div>
</div>
);
}
styles.css
.rowA {
display: flex;
flex-direction: row;
width: 100%;
}
.rowA div {
display: inline-block;
text-align: center;
}
my code for same design layout,
i used reactstrap for desgning,
Application code found here
import React from "react";
import "./style.css";
import "bootstrap/dist/css/bootstrap.css";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button,
CardGroup,
CardBody,
CardImg,
Container,
Row,
Col,
CardFooter,
CardDeck
} from "reactstrap";
export default function App() {
return (
<div>
<Container>
<Row className="show-border">
<Col xs="8">
<Row>
<Col xs="6">
<Button variant="light">Add Card</Button>
</Col>
<Col xs="6">
<Button variant="light">Sort Card</Button>
</Col>
</Row>
<CardDeck className="show-border">
<Card>
<CardTitle>Title</CardTitle>
<CardText>This content is a little bit longer.</CardText>
<CardBody />
<CardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
</CardFooter>
</Card>
<Card>
<CardTitle>Title</CardTitle>
<CardText>This content is a little bit longer.</CardText>
<CardBody />
<CardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
</CardFooter>
</Card>
</CardDeck>
</Col>
<Col className="show-border" xs="4">
(Instructions...)
</Col>
</Row>
<Row className="show-border">
<Col xs="6">Footer</Col>
</Row>
</Container>
</div>
);
}

How to add Custom Styles for react-bootstrap Components?

I'm using react-bootstrap in my project. In the below code I'm trying to add background-color to card.
=> js file
import React from "react";
import "../assets/css/material-dashboard.css";
import { Accordion, Button, Card } from "react-bootstrap";
import { Header, Container } from "semantic-ui-react";
import TabContent from "./TabContent";
import SubmitButton from "./SubmitButton";
import "../../src/assets/css/collapse.css";
const AddMock = () => {
return (
<div class="row">
<Accordion style={{ paddingLeft: "32px" }}>
<Card className="collapseStyle">
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Options
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<Container>
<Header as="h3">Hierarchy</Header>
<TabContent />
<SubmitButton />
</Container>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
};
export default AddMock;
This is the style I'm referring to,
=> collapse.css
.card .card-header .collapseStyle {
background-color: cornflowerblue;
}
It seems like the card is not actually using the custom CSS I have assigned to it. May I know the best practice to add custom style to react-bootstrap components?

You've added the className to the card, so the CSS selector will be:
.card.collapseStyle .card-header {
background-color: cornflowerblue;
}

Semantic UI with semantic-ui-react grid width inside popup

I[m trying to build, using semantic-ui-react, a menu like the example on the Semantic UI documentation, but I'm having problems on the popup width.
Here is my code:
import React, { Component } from 'react';
import { Menu, Icon, Dropdown, Popup, Grid, List } from 'semantic-ui-react';
import menulogo from '../../images/logo.svg';
class AppMenu extends Component {
render() {
return (
<div>
<Menu>
<Menu.Item>
<img alt='Logo' src={menulogo}/>
<strong color='blue'>Logo</strong>
</Menu.Item>
<Menu.Item>
<Icon name='browser' color='blue'/>
Menu
<Popup
trigger={<Icon name='dropdown'/>}
position='bottom center'
flowing
hoverable
>
<Grid
columns={3}
centered
divided
relaxed
>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 1</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 2</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
</Grid>
</Popup>
</Menu.Item>
</Menu>
</div>
);
}
}
export default AppMenu;
This is the result I´m getting:
I expected the popup to fit the text nicely. Seens that the columns are too small in width to keep all text.
Help appreciated.

The problem here is that the Grid component in semantic-ui is responsive. It takes on the size of it's parent if no width is defined. This is in the styles and not specific to semantic-ui-react. If you want your grid to take up more space horizontally, you can set a style={{width: '300px'}} on your Grid component and this will give you the space you want.
Add style={{width: '300px'}} on your Grid component.
I'd recommend doing a couple additional things here.
If you are insistent on using a Popup for this menu, you'll probably want to add the position='bottom left' prop to it.
Use the entire Menu.Item as the Popup component's trigger instead.
These two changes will give you this:
You'll probably be better off using a Dropdown component on this Menu instead, but I will keep the scope of my answer based on the initial question.
A codesandbox example is included showing all three of these changes in working order: https://codesandbox.io/s/n39o5y344p