I'm having a little problem with ReactJs. I have a page with several tabs and in each tabs I have a button that refresh the page so when I click on the refresh button it goes back to tab 1 while the refresh happens in tab 2 while I want tab 2 to remain open after refresh.
I want after the refresh tab 2 stays open
Example photo:
Before refresh:
After refresh:
I want after the refresh tab 2 stays open...
Here is my code:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { TabProvider, Tab, TabPanel, TabList } from 'react-web-tabs';
import 'react-web-tabs/dist/react-web-tabs.css';
import { Button } from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css';
import './App.css';
class App extends Component {
render() {
return (
<TabProvider defaultTab="vertical-tab-one" vertical>
<section className="my-tabs">
<TabList className="my-tablist">
<Tab tabFor="vertical-tab-one">Tab 1</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-two">Tab 2</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-three" className="my-tab">Tab 3</Tab>
</TabList>
<div className="wrapper">
<TabPanel tabId="vertical-tab-one">
<center>
<Button className="buttonPosition" onClick={myClick}>Refresh tab 1</Button>
</center>
</TabPanel>
<TabPanel tabId="vertical-tab-two">
<center>
<Button className="buttonPosition" onClick={myClick}>Refresh tab 2</Button>
</center>
</TabPanel>
<TabPanel tabId="vertical-tab-three">
<center>
<Button className="buttonPosition" onClick={myClick}>Refresh tab 3</Button>
</center>
</TabPanel>
</div>
</section>
</TabProvider>
);
}
}
function myClick(){
window.location.reload();
}
export default App;
I thank you in advance. I continue my research.
Sincerely Valentine
On a page reload the state will reset to it's initial state. You either have to store the last tab in the browsers localStorage or on the server side.
You also need to update your component to retrieve the last state when loading. In the life cycle of React this probably means inside componentDidMount().
You can add the state object in your class, and set its default every time the component is mount, to save the state in a browser refresh you can use localstorage...
class App extends Component {
constructor(props){
super(props);
this.state={
defaultTab: 'vertical-tab-one'
}
}
componentDidMount(){
let default = localStorage.getItem('default');
this.setState(()=>({
defaultTab:default
})
);
}
render(){
return (
<TabProvider
defaultTab={this.state.defaultTab} vertical>
<section className="my-tabs">
<TabList className="my-tablist">
<Tab tabFor="vertical-tab-one">Tab 1</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-two">Tab 2</Tab>
<span className="divider"></span>
<Tab tabFor="vertical-tab-three" className="my-tab">Tab 3</Tab>
</TabList>
Related
I need to add a button of login and sign up in the header of first page, but it different from others page. I am just a new to react.js, just have some of the knowledge of this hope anyone of you will help me. If you need more detail, please comments at below.
Here is my home page:
class Welcome extends Component {
constructor(props){
super();
this.state ={
appName: 'Event Management System'
}
}
render(){
return (
<div className="row small-up-2 medium-up-3 large-up-4">
<div className="column">
<h2> Project Description </h2>
Login
SignUp
</div>
</div>
);
}
}
Here is App.js:
class App extends Component {
constructor(props){
super();
this.state ={
appName: 'Event Management System'
}
}
render(){
return (
<div className="off-canvas-wrapper">
<div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div className="off-canvas-content" data-off-canvas-content>
<MobileHeader name={this.state.appName}/>
<Header name={this.state.appName}/>
<Routes />
<hr/>
<Footer />
</div>
</div>
</div>
);
}
}
and here is header.js
class Header extends Component {
render(){
return (
<div className="callout primary" id="Header">
<div className="row column">
<h1> {this.props.name} </h1>
</div>
</div>
);
}
}
What i need is like this in first page:
In your header component you can put this in your return:
{document.pathname === '/home' ? <button></button> : ""}
(Edit: remember that a jsx requires everything to be wrapped in one element, so if you're showing 2 buttons you'll have to do this twice or wrap the two button elements in another element like a div)
Essentially render the button IF document.pathname EQUALS the path of the page you want it to show on. If you're using state to manage the page rather than a router, use the state for your condition instead.
I'm trying to call this Modal, but does not appear. I tried to put the Modal into a render() but it does not work too. I used inspect element tool and it shows the div from Modal but show it "grey".
This is the Modal
import React from 'react';
import './Modal.css';
const modal = props =>(
<div className="modal">
<header className="modal__header">
<h1>{props.title}</h1>
</header>
<section className="modal__content">
{props.children}
</section>
<section className="modal__actions">
{props.canCancel && (<button className="btn" onClick={props.onCancel}>Cancel</button>)}
{props.canConfirm &&(<button className="btn" onClick={props.onConfirm}>Confirm</button>)}
</section>
</div>
);
export default modal;
and I´m trying to call the Modal here
import React,{Component} from 'react';
import Modal from '../components/Modal/Modal.js';
import './Investments.css';
class InvestmentsPage extends Component{
render(){
return(
<React.Fragment>
<Modal>
<p>Modal content</p>
</Modal>
<div className="investment-control">
<p>Modal</p>
<button className="btn btnt1" >Crear </button>
</div>
</React.Fragment>);
}
}
export default InvestmentsPage;
Your approach is wrong. I am guessing here your modal is hidden under some other DOM element. You should use ReactDOM.createPortal() for modals, tooltips etc. :
In index.html under the existing div with id='root' create new
div with id='modal';
In your modal Component as listed above import ReactDOM from 'react-dom'
and return
ReactDOM.createPortal(your_JSX_here, document.querySelector('#modal'))
This is the component I am working on. I have three tab named newOrder, currentOrder and orderHistory.
How can I move a card in New Order tab, to Current Order tab when I press 'Accept' button on card.
export default class Driver extends Component {
constructor(props, context) {
super(props, context);
this.state = {
key: 'home',
};
}
render() {
return (
<Tabs id="controlled-tab-example" activeKey={this.state.key}
onSelect{key => this.setState({ key })}>
<Tab eventKey="newOrder" title="New Order">
//this is the card with Accept button.
<div class="card">
<div class="card-body">
<Button type="button>Accept</Button>
</div>
</div>
</Tab>
<Tab eventKey="currentOrder" title="Current Order"></Tab>
<Tab eventKey="orderHistory" title="OrderHistory"></Tab>
</Tabs>
);
}
}
This can be achieved by using the component state. You may refer this link: https://reactjs.org/docs/state-and-lifecycle.html
I am working on ReactJS and was wondering on how can I pass value between tabs.
Below is the component I am working on. I have three tab and want to pass the card from one tab to another on clicking accept button.
import React, { Component } from 'react'
import DriverPlacedOrder from './DriverPlacedOrder';
import {Link }from 'react-router-dom';
import {Tabs,Tab} from 'react-bootstrap';
export default class Driver extends Component {
constructor(props, context) {
super(props, context);
this.state = {
key: 'home',
};
}
render() {
return (
<Tabs
id="controlled-tab-example"
activeKey={this.state.key}
onSelect={key => this.setState({ key })}
>
<Tab eventKey="newOrder" title="New Order">
<div class="container">
<div class="card" style={{width:'100%',borderRadius:'2%', border: '4px solid lightgreen'}}>
<div class="card-body" style={{textAlign:'center'}}>
<h4 class="card-title">{CID}</h4>
<p class="card-text"><h5>{RID}</h5></p>
<Button variant="outline-success"onClick={} style={{width:'33%'}}><i class="fas fa-check-circle fa-lg"></i><br/>Accept</Button>
<Button variant="outline-primary" style={{width:'33%'}}><i class="fas fa-book-open fa-lg" fa-lg></i><br/>View</Button>
</div>
</div>
</div>
</Tab>
<Tab eventKey="currentOrder" title="Current Order">
</Tab>
<Tab eventKey="orderHistory" title="OrderHistory">
</Tab>
</Tabs>
);
}
}
Onclicking accept button how can I pass card from NewOrder tab to currentOrder tab?
I am working on ReactJS and was wondering on how can I pass value
between tabs.
<Tab my_data={my_data_value} eventKey="orderHistory" title="OrderHistory">
</Tab>
If I understand your question correctly, you want to re-use the card markup for each tab, and also allow navigation between tabs via that same card markup.
One way to achieve that would be to define a method such as renderCard() that renders that common markup. You'd then call that method when rendering the contents of each <Tab> component. Something to keep in mind also is that renderCard() may need a parameter to specify which tab the "Accept" button navigates to:
export default class Driver extends Component {
constructor(props, context) {
super(props, context);
this.state = { key: 'newOrder' };
}
/* Define render card function. Takes nextKey parameter that controls what tab the Accept button will navigate to */
renderCard(nextKey) {
return (<div class="card" style={{width:'100%',borderRadius:'2%', border: '4px solid lightgreen'}}>
<div class="card-body" style={{textAlign:'center'}}>
<h4 class="card-title">{'CID'}</h4>
<p class="card-text"><h5>{'RID'}</h5></p>
<Button variant="outline-success"onClick={ () => {
this.setState({ key : nextKey })
}} style={{width:'33%'}}><i class="fas fa-check-circle fa-lg"></i><br/>Accept</Button>
<Button variant="outline-primary" style={{width:'33%'}}><i class="fas fa-book-open fa-lg" fa-lg></i><br/>View</Button>
</div>
</div>)
}
render() {
return (
<Tabs
id="controlled-tab-example"
activeKey={this.state.key}
onSelect={key => this.setState({ key })}>
<Tab eventKey="newOrder" title="New Order">
<div class="container">
{ /* Render card, and specify which tab the card's accept button will navigate to */ }
{ this.renderCard('currentOrder') }
</div>
</Tab>
<Tab eventKey="currentOrder" title="Current Order">
<div class="container">
{ /* Render card if this tab visible */ }
{ this.renderCard('orderHistory') }
</div>
</Tab>
<Tab eventKey="orderHistory" title="OrderHistory">
<div class="container">
{ /* Render card if this tab visible */ }
{ this.renderCard('newOrder') }
</div>
</Tab>
</Tabs>
);
}
}
Is it possible to render the matching data in the AutoComplete popover in the form of Tabs? I may have upto three categories of data matching the input value, that I'd like to display as tabs. Can I combine the Material-UI AutoComplete and Tabs components to achieve this?
The AutoComplete component creates a Menu component for the suggested items. So each suggestion is a component of type MenuItem.
MenuItem component could have dynamic children, and therefore you could add a tabs as the children of the MenuItem. The problem is that any click inside the suggestion popover closes the popover.
If you want to try it out, or maybe hack it somehow (like preventing the click event for tunneling to the popover, and handling the open state manually(?)), here is reproduction code (start typing the word "test" in the input to see suggestions):
import React from 'react';
import AutoComplete from 'material-ui/AutoComplete';
import {Tabs, Tab} from 'material-ui/Tabs';
import MenuItem from 'material-ui/MenuItem';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {deepOrange500} from 'material-ui/styles/colors';
const muiTheme = getMuiTheme({
palette: {
accent1Color: deepOrange500,
},
});
export default class AutoCompleteExampleSimple extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: [],
};
}
getTabs() {
return <MenuItem>
<Tabs>
<Tab label="Item One" >
<div>
<h2>Tab One</h2>
<p>
This is an example tab.
</p>
<p>
You can put any sort of HTML or react component in here. It even keeps the component state!
</p>
</div>
</Tab>
<Tab label="Item Two" >
<div>
<h2>Tab Two</h2>
<p>
This is another example tab.
</p>
</div>
</Tab>
<Tab
label="onActive"
route="/home">
<div>
<h2 >Tab Three</h2>
<p>
This is a third example tab.
</p>
</div>
</Tab>
</Tabs>
</MenuItem>
}
handleUpdateInput(value) {
this.setState({
dataSource: [
{text: 'test', value: this.getTabs()}
],
});
};
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div>
<AutoComplete
hintText="Type anything"
dataSource={this.state.dataSource}
onUpdateInput={this.handleUpdateInput.bind(this)}
/>
</div>
</MuiThemeProvider>
);
}
}