I'm using the AppBar component of material-ui library, I added a button, I'd say it's hardcoded in the AppBar, I'm trying to transform this button to just a text in the AppBar, but I got nothing.
How can I transform the button in the AppBar to just text?
App.js:
const connectWalletChecker = () => {
return(
<div>
<SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text='Connect Wallet' handle={connectWalletPressed}/>
</div>
)
}
const AlreadyConnected = () => {
return(
<div>
<SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text={walletAddress} handle={null}/>
</div>
)
}
return(
<div>
{walletAddress ? AlreadyConnected() : connectWalletChecker()}
</div>
)
};
AppBar:
<Button id={props.id} color={props.color} variant={props.variant}
href="#contained-buttons" onClick={props.handle}>{props.text}</Button>
Full code on Github.
use variant="text" instead of variant="contained" for transforming button into text.
your code will be :
const connectWalletChecker = () => {
return(
<div>
<SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text='Connect Wallet' handle={connectWalletPressed}/>
</div>
)
}
const AlreadyConnected = () => {
return(
<div>
<SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text={walletAddress} handle={null}/>
</div>
)
}
return(
<div>
{walletAddress ? AlreadyConnected() : connectWalletChecker()}
</div>
)
};
Related
I have a react component that display a card with input and button.
I want when I click the button to display a spinner, meanwhile after button click there is an axios post request to write some data on server. the problem is I don't see the spinnet after I click the button, I only see the message after my request done (2-3 sec after click)
function User(props) {
const [memo, setMemo] = useState('');
const [isUpdated, setIsUpdated] = useState(false);
const [spinner, setSpinner] = useState(false);
const onClickForm = (e) => {
e.preventDefault();
let inputValue = document.getElementById(inputId);
setSpinner(true);
axios.post(url, {
body: {
"internalid": props.internalid,
"memo": memo
},
headers: {"Content-Type": "application/json"},
redirect: 'follow'
}).then(response => {
console.log(response.data[0]);
setSpinner(false);
if (response.data[0].Success) {
setIsUpdated(true);
}
}, (error) => {
setIsUpdated(true);
setSpinner(false);
console.log(error)
}
)
setMemo('')
inputValue.value = '';
}
return (
<div key={props.index}>
<form onSubmit={e => onClickForm(e)}>
<Card className="card" key={props.index}>
<Card.Content>
<Card.Header>{props.tranid}</Card.Header>
<Card.Description>
{props.name}
</Card.Description>
<br/>
{!isUpdated ? (
<div>
<Input id={inputId} placeholder='Write to memo'
onChange={(e) => setMemo(e.target.value)}/>
<br/>
<button style={{marginTop: 20}} className="ui inverted blue button">Submit Change
</button>
</div>
) : (
<div>
{!spinner ? <p style={{color: 'green'}}>UPDATED!</p> : <CircularProgress/>}
</div>
)
}
)}
</Card.Content>
</Card>
</form>
</div>
)
}
It seems that as the conditions are set, when !isUpdated then <CircularProgress /> may not render, even though spinner is true.
In the conditional render output, perhaps try:
{!isUpdated && !spinner && (
<div>
<Input
id={inputId}
placeholder="Write to memo"
onChange={(e) => setMemo(e.target.value)}
/>
<br />
<button style={{ marginTop: 20 }} className="ui inverted blue button">
Submit Change
</button>
</div>
)}
{!isUpdated && spinner && <CircularProgress />}
{isUpdated && !spinner && <p style={{ color: "green" }}>UPDATED!</p>}
Or if ternary operator is preferred:
{isUpdated ? (
<p style={{ color: "green" }}>UPDATED!</p>
) : spinner ? (
<CircularProgress />
) : (
<div>
<Input
id={inputId}
placeholder="Write to memo"
onChange={(e) => setMemo(e.target.value)}
/>
<br />
<button style={{ marginTop: 20 }} className="ui inverted blue button">
Submit Change
</button>
</div>
)}
I have a problem with getting the current clicked element's data's from the API and displaying it inside React Bootstrap Modal body. The parent component is TopMovies.js which looks like:
import React, { useState } from 'react';
import TopMoviesModal from '../top-movies-modal/TopMoviesModal';
const TopMovies = ({ currentMovies }) => {
const [isOpen, setIsOpen] = useState(false);
const showModal = () => {
setIsOpen(true);
};
const hideModal = () => {
setIsOpen(false);
};
const renderMovies = () => {
if (Object.keys(currentMovies).length && currentMovies.length) {
return (
<div className="movies-labels-container">
{currentMovies.map((movie) => {
return (
<div className="movie-label"
key={movie.id.attributes['im:id']} title={movie['im:name']['label']}
onClick={showModal}>
<img className="movie-img" src={movie['im:image'][2]['label']} alt={movie['im:name']['label']} />
<br />
<div className="text-under">
<span id="movie-title">{movie['im:name']['label']}</span>
<br />
<span id="movie-subtitle">{movie.category.attributes.term}</span>
</div>
</div>
);
})}
</div>
);
}
};
return (
<section className="top-movies-list">
<div className="container-outter">
<div className="container-fluid">
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12" id="top-movies-module">
<div className="top-movies-container">
<h1 className="container-title">
TOP 100 movies
</h1>
{renderMovies()}
<TopMoviesModal
currentMovies={currentMovies}
hideModal={hideModal}
isOpen={isOpen} />
</div>
</div>
</div>
</div>
</div>
</section >
)}
export default TopMovies;
and the child component TopMoviesModal.js which looks like this:
import React from 'react';
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
const TopMoviesModal = ({ currentMovies, hideModal, isOpen }) => {
const renderMoviesDetails = () => {
if (Object.keys(currentMovies).length && currentMovies.length) {
return (
<div>
{currentMovies.map((movie, index) => {
return (
<div className="movie-label" key={movie.id.attributes['im:id']}>
<span id="movie-title">{movie['im:name']['label']}</span>
</div>
);
})}
</div>
);
}
};
return (
<Modal
show={isOpen}
onHide={hideModal}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Modal heading
</Modal.Title>
</Modal.Header>
<Modal.Body>
{renderMoviesDetails()}
</Modal.Body>
<Modal.Footer>
<Button onClick={hideModal}>Close</Button>
</Modal.Footer>
</Modal>
);}
export default TopMoviesModal;
Could you help me to solve this problem? I would be very grateful, thanks a lot
I want to use two dialog in sign up page and login page.
the implement that I want to do are signup screen showing up when click to sign up button on the Top page, and login screen showing up when click to login Button on signup page.
I wrote open state on App.js.
but the trouble is when it's written in App.js, two of modal open..
Does anyone know how to settle it?
App.js
const App = () => {
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Top handleClickOpen={handleClickOpen}/>
<SignupModal open={open} handleClose={handleClose} />
<LoginModal open={open} handleClose={handleClose} />
</div>
)
Top.js
const Top = (props) => {
const classes = useStyles();
return (
<React.Fragment>
<div style={style}>
<Button variant="outlined" className={classes.loginButton} onClick={props.handleClickOpen}>
Login
</Button>
</div>
<h1>Toppage</h1>
</React.Fragment>
);
}
SignupModal.js
const SignupModal = (props) => {
return (
<div>
<Dialog
open={props.open}
onClose={props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title" className={classes.title}>Sign up</DialogTitle>
<DialogContent className={classes.content}>
<div className={classes.text}>
<TextField id="standard-basic" label=“name” fullWidth/>
<TextField id="standard-basic" label=“email” fullWidth/>
<TextField id="standard-basic" label=“password” fullWidth/>
<TextField id="standard-basic" label=“pass”word fullWidth/>
</div>
</DialogContent>
<p className={classes.toLogin}>to Login</p>
<DialogActions>
<Button onClick={props.handleClose} className={classes.signUpButton}>
Send
</Button>
</DialogActions>
</Dialog>
</div>
);
}
LoginModal.ls
const LoginModal = (props) => {
return (
<div>
<Dialog
open={props.open}
onClose={props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title" className={classes.title}>Login</DialogTitle>
<DialogContent className={classes.content}>
<div className={classes.text}>
<TextField id="standard-basic" label=“name” fullWidth/>
<TextField id="standard-basic" label=“pass”word fullWidth}/>
</div>
</DialogContent>
<DialogActions>
<Button onClick={props.handleClose} className={classes.signUpButton}>
Login
</Button>
</DialogActions>
</Dialog>
</div>
);
}
export default LoginModal
You are sharing the state on both of your modals that's why.
The solution is simple, have 2 states; one that will determine if SignupModal is opened or not and another one for LoginModal.
const App = () => {
const [openLogin, setOpenLogin] = useState(false);
const [openSignup, setOpenSignup] = useState(false);
return (
<div>
<Top
onClickLogin={() => setOpenLogin(true)}
onClickSignup={() => setOpenSignup(true)}
/>
<SignupModal open={openLogin} handleClose={() => setOpenLogin(false)} />
<LoginModal open={openSignup} handleClose={() => setOpenSignup(false)} />
</div>
);
};
const Top = (props) => {
return (
<React.Fragment>
<div>
<Button
variant="outlined"
className={classes.loginButton}
onClick={props.onClickLogin}
>
Login
</Button>
<Button
variant="outlined"
className={classes.loginButton}
onClick={props.onClickSignup}
>
Signup
</Button>
</div>
<h1>Toppage</h1>
</React.Fragment>
);
};
I've gone through all of the example questions on this and can't seem to figure out what my problem is.
Here is the full error:
index.js:1375 Warning: validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>.
in tbody (created by TableBody)
in TableBody (at Favorites.js:167)
in table (created by Table)
in Table (at Favorites.js:123)
in Favorites (created by ConnectFunction)
in ConnectFunction (at App.js:73)
in Route (at App.js:69)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:46)
in div (created by Container)
in Container (at App.js:44)
in App (created by ConnectFunction)
in ConnectFunction (at src/index.js:10)
in Provider (at src/index.js:9)
and my full code
import React, { useState, useEffect } from "react";
import Search from "./Search";
import { connect } from "react-redux";
import {
Table,
Popup,
Responsive,
Button,
Segment,
Header,
Image
} from "semantic-ui-react";
import { searchChange } from "../reducers/searchReducer";
import { fetchData } from "../reducers/baseballReducer";
import { removeFavorite } from "../reducers/favoriteReducer";
import { getFavorites } from "../reducers/favoriteReducer";
import { getUpdates } from "../reducers/updateReducer";
import { setNotification } from "../reducers/notificationReducer";
import _ from "lodash";
var moment = require("moment");
moment().format();
//Filter 'favupdates' state for user's input
const searchCards = ({ favUpdates, search }) => {
return search
? favUpdates.filter(a =>
a.title
.toString()
.toLowerCase()
.includes(search.toLowerCase())
)
: favUpdates;
};
const style = {
borderRadius: 0,
padding: "2em"
};
const Favorites = props => {
useEffect(() => {
document.title = "My Favorites | All Vintage Search";
}, []);
useEffect(() => {
props.getFavorites(props.loggedUser.id);
}, [props.loggedUser]);
//Set 'filteredData' state
useEffect(() => {
setData(props.cardsToShow);
}, [props]);
const mapFAVS = props.favorites;
const data = Array.from(mapFAVS);
const updatedFavs = data.map(item => item.id);
const formatFavs = updatedFavs.map(id => id.join(","));
console.log("FORMAT FAVS", formatFavs);
//Get updated data from eBay based on user's favorite id's and update 'favUpdates' state
useEffect(() => {
props.getUpdates(formatFavs);
}, [props.favorites]);
const [column, setColumn] = useState(null);
const [direction, setDirection] = useState(null);
const [filteredData, setData] = useState(props.cardsToShow);
console.log("Filtered Data", filteredData);
const handleSortNumeric = clickedColumn => {
const sorter = data => parseInt(data[clickedColumn]);
setData(_.sortBy(filteredData, sorter));
};
const handleSortReverse = () => {
const sorter = data => parseInt(data);
setData(_.sortBy(filteredData, sorter).reverse());
};
const handleSort = clickedColumn => {
if (column !== clickedColumn) {
setColumn(clickedColumn);
if (clickedColumn === "title" || "acceptsOffers" || "timeStamp") {
setData(_.sortBy(filteredData, [clickedColumn]));
} else {
handleSortNumeric(clickedColumn);
}
setDirection("ascending");
return;
}
if (clickedColumn === "title") {
setData(_.sortBy(filteredData.reverse()));
} else {
handleSortReverse();
}
direction === "ascending"
? setDirection("descending")
: setDirection("ascending");
};
const removeFavorite = card => {
props.removeFavorite(card, props.loggedUser);
props.setNotification(`You removed ${card.title}!`, 5);
};
if (!props.cardsToShow) return null;
return (
<>
<Search />
<Segment inverted color="blue">
<Header inverted color="grey" size="medium">
My Favorites
</Header>
</Segment>
<Segment>Count: {props.cardsToShow.length}</Segment>
<Responsive maxWidth={767}>
<strong>Click to Sort:</strong>
</Responsive>
<Table sortable celled fixed striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell
textAlign="center"
sorted={column === "title" ? direction : null}
onClick={() => handleSort("title")}
>
Card Title
</Table.HeaderCell>
<Table.HeaderCell
width={2}
textAlign="center"
sorted={column === "updatedBids" ? direction : null}
onClick={() => handleSort("updatedBids")}
>
# Bids
</Table.HeaderCell>
<Table.HeaderCell
textAlign="center"
sorted={column === "updatedPrice" ? direction : null}
onClick={() => handleSort("updatedPrice")}
>
Price
</Table.HeaderCell>
<Table.HeaderCell
textAlign="center"
sorted={column === "timeStamp" ? direction : null}
onClick={() => handleSort("timeStamp")}
>
Time Left
</Table.HeaderCell>
<Table.HeaderCell
textAlign="center"
sorted={column === "status" ? direction : null}
onClick={() => handleSort("status")}
>
Status
</Table.HeaderCell>
<Table.HeaderCell textAlign="center" width={2}>
Remove
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{!filteredData
? "Sorry No Cards Found"
: filteredData.map(card => (
<>
<Responsive maxWidth={767}>
<div className="ui piled compact segment">
<div className="ui card">
<div className="blurring dimmable image">
<div className="ui inverted dimmer">
<div className="content">
<div className="center">
<div className="ui red button view">
VIEW
</div>
</div>
</div>
</div>
<Image
src={card.image}
href={card.itemURL}
centered
style={{ padding: "5px" }}
/>
</div>
<div className="content">
<div
id="rate"
className="ui star rating right floated"
data-rating="3"
></div>
<div className="header">
<a href={card.itemURL}>{card.title}</a>
</div>
<div
className="meta"
style={{ padding: "5px 0 0 0" }}
>
<span className="date">
<i className="clock icon"></i> Ends in{" "}
{moment
.duration(card.timeLeft, "minutes")
.humanize()}
</span>
<div style={{ padding: "10px 0 0 0" }}>
<span>
<Button color="green">
${card.updatedPrice}
</Button>
</span>
<span class="right floated date">
{" "}
<Button
onClick={() => removeFavorite(card)}
color="red"
icon="remove circle"
/>
</span>
</div>
</div>
</div>
<div className="extra content">
<div
className="ui right labeled button"
data-content="Bids"
data-variation="tiny"
tabindex="0"
>
<div className="ui blue icon tiny button">
<i className="gavel large icon"></i>
</div>
<a
href={card.itemURL}
className="ui basic blue left pointing label"
>
{card.updatedBids}
</a>
</div>
<div
className="ui left labeled right floated button"
data-content="Watch Count"
data-variation="tiny"
tabindex="0"
>
<a
href={card.itemURL}
className="ui basic blue right pointing label"
>
{card.status}
</a>
<div className="ui blue icon tiny button">
<i className="history large icon"></i>
</div>
</div>
</div>
</div>
</div>
</Responsive>
<Responsive
as={"tr"}
minWidth={768}
style={{ width: "100%" }}
>
<Popup
trigger={
<Table.Cell>
<a href={card.itemURL} target={"_blank"}>
{card.title}
</a>
</Table.Cell>
}
content={
<img
alt={card.title}
src={card.image}
height="250"
></img>
}
style={style}
size="small"
position="left center"
></Popup>
<Table.Cell textAlign="center">
{card.updatedBids}
</Table.Cell>
<Table.Cell textAlign="center">
${card.updatedPrice}
</Table.Cell>
<Table.Cell textAlign="center">
{moment.duration(card.timeLeft, "minutes").humanize()}
</Table.Cell>
<Table.Cell textAlign="center">{card.status}</Table.Cell>
<Table.Cell textAlign="center">
<Button
onClick={() => removeFavorite(card)}
color="red"
icon="remove circle"
/>
</Table.Cell>
</Responsive>
</>
))}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan="6"></Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
</>
);
};
const mapStateToProps = state => {
return {
baseball: state.baseball,
favorites: state.favorites,
favUpdates: state.favUpdates,
loggedUser: state.loggedUser,
page: state.page,
entries: state.entries,
query: state.query,
pageOutput: state.pageOutput,
search: state.search,
cardsToShow: searchCards(state)
};
};
const mapDispatchToProps = {
searchChange,
fetchData,
removeFavorite,
getFavorites,
getUpdates,
setNotification
};
export default connect(mapStateToProps, mapDispatchToProps)(Favorites);
I suspected the issue might be where i'm using the section as I dont have any table rows or cells set within the Table Body. I tried wrapping that whole section with a Table.Row and a Table.Cell, but still getting the same error. Any ideas?
If !filteredData === false then the only child of <Table.Body> is text.
As the error says, the table body cannot have text as a child.
Wrap the text like this <Table.Row><Table.Cell>Sorry no cards shown</Table.Cell></Table.Row>
I have a working modal component which i need to show in storybook as well. It depends on the props
to show and close. For example, if i need to show modal i would have to do the following
const Demo = () => {
const [open, setOpen] = useState(false)
return (
<>
<button onClick={() => setOpen(true)}>Open Modal</button>
<Modal open={open} onClose={() => setOpen(false)}>
<Modal.Header>Modal Header goes here</Modal.Header>
<Modal.Content>Modal Content goes here</Modal.Content>
<Modal.Footer>Modal Footer goes here</Modal.Footer>
</Modal>
</>
)
}
I am using ReactDOM.createPortal to render modal so for this i have created a div element with an id
modal and inside it another div element is created where the modal appears. For such i have created a
story of modal as follow
storiesOf('Modals', module)
.addDecorator(storyFn => (
<>
<div id="modal">
<div>{storyFn()}</div>
</div>
</>
))
.addDecorator(withKnobs)
.add('Modals - Basic', () => (
<>
<button type="button">Show Modal</button>
<Modal open={boolean('open', false)}>
<Modal.Header>Modal Header goes here</Modal.Header>
<Modal.Content>Modal Content goes here</Modal.Content>
<Modal.Footer>Modal Footer goes here</Modal.Footer>
</Modal>
</>
))
My modal is created in the following way
const el = document.createElement('div')
const modal = document.getElementById('modal')
return ReactDOM.createPortal(
<>
<Backdrop onClick={e => closeModal(e)}>
<ModalBox>
<Wrapper position={position} {...props}>
{children}
<CloseIcon icon={faTimesCircle} />
</Wrapper>
</ModalBox>
</Backdrop>
</>,
el,
)