I would like to show map function's info (taken from a json file) in an expansion panel (react hook), clickng on a button:
<div>
<div>
{item.peapoleInfo.map((info, i) => {
return (
<img src={info.img} />
<h1> {info.name} </>
<button onClick={() => setExpand(!expand)}> CLICK HERE </>
);
})}
</div>
{ expand && <div>
show same info clicking on button
<div>
}
</div>
How can I do it?
Related
I currently have two map functions to render a board for a chess game like this:
<div className='board'>
{rows.map((item) => (
<div key={item} className='row'>
{item.map((square) => (
# The square <div> => <div key={square[0]} className='square' onClick={() => {
board.select !== null &&
checkColour(board.select[1]) !== checkColour(square[1]) && dispatch(move(square))
}}>
{isNaN(square[1]) && <img src={square[1]} alt={square[1]}
onClick={() => { board.turns === checkColour(square[1]) && dispatch(select(square)) }}
className={board.select === square ? 'piece-selected' : 'piece'} />}
</div>
))}
</div>
))}
</div>
Now, I want to change the css style of certain squares <div> after I selected a pawn piece in order to forecast a shadow for showing the possible moves. I want to know is it possible to access the css style of that particular square <div> using the key of that <div>?
Feel free the drop a comment below if you have any insight or idea. Let me know if you want more info. Much appreciated.
Hi people, I am using Semantic UI React for my project. Here I am rendering some content on a Modal. Here you search for the movies and click on add and it adds it below. The problem is that I want the movie list to be aligned with the start of the Search bar. I'm not able to do it. Is there any way using Grid that I can achieve it?
Here is my code:
import React, {useState, useEffect} from 'react';
import {Icon, Button, Modal, Input, Item} from 'semantic-ui-react'
const CreateMovieListModal = (props) => {
const [movieTitle, setMovieTitle] = useState('');
const [movieList, setMovieList] = useState([]);
function handleMovieChange (event, data) {
setMovieTitle(data.value);
}
function addMovie () {
const newMovies = [...movieList, movieTitle];
setMovieList(newMovies);
setMovieTitle('');
}
function showMovieList () {
return movieList.map((currentMovie)=> {
return (
<Item.Group>
<Item>
<Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header as='a'>{currentMovie}</Item.Header>
</Item.Content>
</Item>
</Item.Group>
)
})
}
return (
<Modal open={props.isOpen} onClose={props.onClose}>
<Modal.Header>Add a new list</Modal.Header>
<div style={{marginTop: '10px'}}>
<center>
<Input value={movieTitle} loading={false}
style={{width: '50%'}}
onChange={handleMovieChange}
placeholder='Search For Movies'
/>
<Button onClick={addMovie}>Add Movie</Button>
</center>
</div>
<Modal.Content scrolling>
<div>
{showMovieList()}
</div>
</Modal.Content>
<Modal.Actions>
<Button primary>
Save <Icon name='save' />
</Button>
</Modal.Actions>
</Modal>
);
};
export default CreateMovieListModal;
you need to wrap Input and Movie list into a div, and apply your <center> on that wrapper div:
<center>
<div> <!-- wrapper div -->
<Input value={movieTitle} loading={false}
style={{width: '50%'}}
onChange={handleMovieChange}
placeholder='Search For Movies'
/>
<Button onClick={addMovie}>Add Movie</Button>
<Modal.Content scrolling>
<div>
{showMovieList()}
</div>
</Modal.Content>
</div>
</center>
I try to fix button location when image is added.
I want the button location to be always horizontal.
front : React
css framework : semantic-ui-react
render() {
return (
<Container text style={{marginTop: '3em'}}>
<Header as="h1">{this.state.article.title}</Header>
<this.Paragraph />
{(this.state.article.imageNames || []).map(function(articleData, i) {
return (
<img
src={`https://article-s3-jpskgc.s3-ap-northeast-1.amazonaws.com/media/${
articleData.name
}`}
alt="new"
/>
);
})}
{/* TODO fix button location when image exists */}
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
{this.renderRedirect()}
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>
);
}
The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx
At particular image size, button location is like this:
I want the button location to be always horizontal like this:
I expect the button location is always horizontal.
But the actual is not always according to image size.
As #Arup suggested, This issue is resolved by flexbox.
<Container style={{display: 'flex'}}>
<Button color="green" as="a" href="/">
<Icon name="arrow left" />
Back to Home
</Button>
<Button floated="right" onClick={this.deleteArticle}>
<Icon name="trash" />
Delete this Article
</Button>
</Container>
I'm having troubles with creating a simple gallery allowing to print pictures. I constructed the interface. When I click on the print button, I'm not able to propagate event to a function. Funny enough, it always works for just a couple of items in the gallery so that console logs foo. Could you please point me where is the problem? I am using material-ui, tileData is a json with image url etc...
Many thanks!
class Galery extends React.Component {
state = {
tileData: tileData
};
printThis = tile => {
console.log("printing tile... " + tile.target.value);
};
render() {
const classes = this.props;
return (
<div className={classes.root}>
<ButtonAppBar />
<div style={{ marginBottom: 20 }} />
<Grid container spacing={8}>
<Grid item xs={10}>
<GridList
cellHeight={250}
cellWidth={250}
cols={5}
spacing={4}
className={classes.gridList}
>
{tileData.map(tile => (
<GridListTile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
subtitle={<span>by: {tile.author}</span>}
actionIcon={
<IconButton
className={classes.icon}
value="foo"
onClick={this.printThis}
>
<i className="material-icons md-24 md-light">print</i>
</IconButton>
}
secondActionIcon={
<IconButton className={classes.icon}>
<i className="material-icons md-24 md-light">delete</i>
</IconButton>
}
/>
</GridListTile>
))}
</GridList>
</Grid>
<Grid item xs={2}>
<div className={classes.stats}>
<StatsTable />
</div>
</Grid>
</Grid>
</div>
);
}
}
It works for me to access the object id through event.currentTarget as per github answer here https://github.com/mui-org/material-ui/issues/7974#issuecomment-329250974
`
So my implementation is:
printThis = (event) => {
console.log('printing tile... '+ event.currentTarget.id);
};
<IconButton className={classes.icon} id = {tile.img} onClick={this.printThis}>
<i className="material-icons md-24 md-light" >
print
</i>
</IconButton>
I have a popup up window react component. I want to pass in templates to the component via props.
Here is an example of my popup
popup = (
<div>
<Popup text='This is a popup'
popupEl={ popupEl }
/>
</div>
);
The popup component works if the popupElements value is a button on its own, or a list of checkboxes. But I want to pass in an entire template. Unfortunately the popupElements prop is seen as undefined when I try to do so.
Here is a very basic example of a template I want to pass in. Is there something I'm missing here?
popupEl = (
<div>
<div>
<h1> hi </h1>
</div>
<div>
<button>CLOSE</button>
</div>
</div>
);
The popupEl should be a function which returns JSX,
popupEl = () =>
<div>
<div>
<h1> hi </h1>
</div>
<div>
<button>CLOSE</button>
</div>
</div>
);