How to implement a React component with a similar structure of react-bootstrap Modal?
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h1>My Body</h1>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.handleClose}>Close</Button>
</Modal.Footer>
</Modal>
I was working a solution like this:
import React, { Component } from 'react'
import CardHeader from './CardHeader.jsx'
import CardBody from './CardBody.jsx'
import CardFooter from './CardFooter.jsx'
class Card extends Component {
render() {
return (
<div>
{this.Header}
{this.Body}
{this.Footer}
</div>
)
}
}
Card.Header = CardHeader
Card.Body = CardBody
Card.Footer = CardFooter
export default Card
Sub-components(all are equals) and receive a text prop to render:
import React, { Component } from 'react'
export default class CardHeader extends Component {
render() {
return (
<div>
{this.props.text}
</div>
)
}
}
And calling them:
<Card>
<Card.Header text='Header'/>
<Card.Body text='Body'/>
<Card.Footer text='Footer'/>
</Card>
But didn't work!
Effectively what you are doing is just rendering the children of the parent component.
So if you just change your Card component to...
import React, { Component } from 'react'
class Card extends Component {
render() {
return (
<div>
{this.props.children}
</div>
)
}
}
export default Card
It will then render anything that you pass into the component.
For exporting and being able to use Card.Header etc... you can create a new const
const card = {
Header: HeaderComponent,
Body: BodyComponent,
Footer: FooterComponent
};
export {
card as Card
}
Change your components to render their children
import React, { Component } from 'react'
export default class CardHeader extends Component {
render() {
return (
<div>
{this.props.children}
</div>
)
}
}
Add static properties to Card
import React, { Component } from 'react'
import CardHeader from './CardHeader.jsx'
import CardBody from './CardBody.jsx'
import CardFooter from './CardFooter.jsx'
class Card extends Component {
static Header = CardHeader;
static Body = CardBody;
static Footer = CardFooter;
render() {
return (
{ this.props.children }
)
}
}
export default Card;
Use it like so:
<Card>
<Card.Header>Header</Card/Header>
<Card.Body>Body</Card.Body>
<Card.Footer>Footer</Card.Footer>
</Card>
Related
i have an app component where map over my data an return a component, I want to make app the homepage that displays the component i return
import React, { Component } from "react";
import data from "./data";
import Asteriods from "./components/Asteroids";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import "./App.css";
class App extends Component {
state = {
// calculations: [],
asteroids: data,
};
render() {
return (
<div className="space">
<Header />
{this.state.asteroids.map((item) => (
<Asteriods key={item.id} item={item} />
))}
</div>
);
}
}
export default App;
I also have a component that where i want to link to that other component and still pass props to the stock component
import React, { Component } from "react";
import Stock from "./Stock";
class AsteroidDetails extends Component {
render() {
return (
<div className="popup">
<div className="popup\_inner">
<button onClick={this.props.closePopup}>X</button>
<p> - Name: {this.props.asteroid.name}</p>
<p> - Type: {this.props.asteroid.type}</p>
<p> - Mass: {this.props.asteroid.mass}</p>
Link to vieuw stock
<Stock
// chemPerDay={this.props.chemPerDay}
{...this.props}
// remainingMassPerday={this.props.remainingMassPerday}
// asteroidYieldPerDay={this.props.asteroidYieldPerDay}
// remainingMpct={this.props.remainingMpct}
/>
</div>
</div>
);
}
}
export default AsteroidDetails;
how can i use react router in both of these cases ?
Loader Component:
import React, { Component } from "react";
export class Loader extends Component {
state = {
isLoading: true,
};
componentDidMount() {
setTimeout(() => {
this.setState({ isLoading: false });
}, 500);
}
render() {
return (
<span className={"loading " + (this.state.isLoading ? "show" : "hide")}>
<span className="loading-bg"></span>{" "}
<img src="img/loader.gif" alt="Loading" />{" "}
</span>
);
}
}
export default Loader;
Layout Component:
import React, { Component } from "react";
import { Container } from "reactstrap";
import { NavMenu } from "./NavMenu";
import Loader from "./common/Loader";
import Footer from "./Footer";
export class Layout extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<NavMenu />
<Container fluid>
<Loader />
{this.props.children}
<footer className="d-flex justify-content-between align-items-center pt-3">
<Footer />
</footer>
</Container>
</div>
);
}
}
So every component will have loader and it will hide once componentDidMount()....
I want show loader when another actions like form submission and opening a modal. How to acheive it form form or modal component.
I want to reuse the same Loader component.
the State of Loading should be in the parent components in this case it should be in the layout component and then you pass it as a prop to the Loader component.
ofcourse you should be showing the loader component of state is true and hide if false.
I'm trying to set values for a component by fathers prop, but this error pops and I don't have a clue on where is the real error
This is my component code:
import React from 'react';
import './styles.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export default function Actions() {
return (
<div className="actions">
<FontAwesomeIcon className="icon" icon={this.props.fa} size="lg" />
<h1>{this.props.sections}</h1>
</div>
);
}
And this is my father component code:
import React from 'react';
import './styles.css'
import Actions from "../Actions/index"
// - - - FONT-AWESOME
import { faExternalLinkAlt } from '#fortawesome/free-solid-svg-icons'
export default function Navbar() {
return (
<div className="navbar">
<Actions sections={"Lançamentos"} fa={faExternalLinkAlt}/>
<Actions sections={"Processos"} fa={faExternalLinkAlt}/>
<Actions sections={"Paineis"} fa={faExternalLinkAlt}/>
<Actions sections={"Contratos"} fa={faExternalLinkAlt}/>
<Actions sections={"Relatórios"} fa={faExternalLinkAlt}/>
</div>
);
}
Thank you in advance for the help!
In functional components, you don't need to reference this
Class based component
Definition:
class MyComponent extends React.Component {
render () {
<div>{this.props.sampleProp}</div>
}
}
Usage:
<MyComponent sampleProps={someValue} />
Functional component
Definition:
function MyComponent({sampleProp}) {
return (
<div>{sampleProp}</div>
)
}
Usage:
<MyComponent sampleProp={someValue} />
When you use functional components you need to pass props as argument of the function, you also don't have 'this'.
export default function Actions(props) {
return (
<div className="actions">
<FontAwesomeIcon className="icon" icon={props.fa} size="lg" />
<h1>{props.sections}</h1>
</div>
);
}
That would be your final code, hope it helps.
This is for class components. For functional components it gets from the function arguments:
import React from 'react';
import './styles.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export default function Actions(props) {
return (
<div className="actions">
<FontAwesomeIcon className="icon" icon={props.fa} size="lg" />
<h1>{props.sections}</h1>
</div>
);
}
Just remove this keyword from the function component, and pass props to the function too, like this:
import React from 'react';
import './styles.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export default function Actions(props) {
return (
<div className="actions">
<FontAwesomeIcon className="icon" icon={props.fa} size="lg" />
<h1>{props.sections}</h1>
</div>
);
}
I want to make when i click button, show modal in different class.
how to make it this?
import React, { Component } from 'react';
import addmodal from './addmodal';
class page extends Component {
...//skip
handleAdd= () =>{
//...how?
}
render(){
return (
<button onClick={this.handleAdd} > Add </button>
)
}
}
import React, { Component } from 'react';
class addmodal extends Component {
// ... skip
render(){
return(
<modal inOpen={this.state.isopen} >
...//skip
</modal>
)
}
}
export default addmodal;
I can't call this addmodal...
how to call modal?
First, your variable naming is terrible. I fixed it for you here. The state that dictates if modal is open must be on the parent component since you have your trigger there. Then, pass it as props to the modal component. Here is the fixed code for you:
import React, { Component } from 'react';
import AddModal from './addmodal';
class Page extends Component {
constructor(){
super();
this.state = { isModalOpen: false };
}
...//skip
handleAdd= () =>{
this.setState({ isModalOpen: true });
}
render(){
return (
<div>
<button onClick={this.handleAdd} > Add </button>
<AddModal isOpen={this.state.isModalOpen} />
</div>
)
}
}
import React, { Component } from 'react';
class AddModal extends Component {
// ... skip
render(){
return(
<modal inOpen={this.props.isOpen} >
...//skip
</modal>
)
}
}
export default AddModal;
what about using trigger. Its very usefull.
<Modal trigger={ <button onClick={() => onCLickPay()} className={someting}> When clicked here modal with show up</button> }`enter code here` >
Hi the previous answers to similar Questions doesn't help me.
I have the App Component:
import React from "react";
import Header from "./components/Header";
import Menu from "./components/Menu";
import Board from "./components/Board";
class App extends React.Component {
constructor() {
super();
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
condition: true
};
}
onButtonClick() {
console.log("clicked...");
this.setState({
condition: !this.state.condition
});
}
render() {
return (
<div className="App">
<Header />
<Menu condition={this.state.condition} />
<Board />
</div>
);
}
}
export default App;
the MenuIcon Component:
import React from "react";
import "../css/main.css";
class MenuIcon extends React.Component {
render() {
return (
<div className="Menu_icon" onClick={this.props.onButtonClick}>
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
<div className="Menu_icon_element" />
</div>
);
}
}
export default MenuIcon;
and the Menu Component
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
import React from "react";
import "../css/main.css";
class Menu extends React.Component {
render() {
return (
<div className={this.props.condition ? "Menu inactive" : "Menu active"}>
<ul>
<li>Notes</li>
<li>Erinnerungen</li>
</ul>
</div>
);
}
}
export default Menu;
and the Header Component
import React from "react";
import "../css/main.css";
import MenuIcon from "./MenuIcon";
class Header extends React.Component {
render() {
return (
<div className="Header_container">
<MenuIcon onButtonClick={this.props.onButtonClick} />
<div className="Header_headline">Notes</div>
</div>
);
}
}
export default Header;
I want to trigger the onButtonClick defined in App.js every time when I click on the MenuIcon. And then the Menu should fade in or out. The animation is done with css.
I dont find my mistake?
Could someone please help me?