I'm building a website with React and for the "news" section i have a list of 3 components representing the different news. They belong to a flexbox and I'm trying to make them responsive. For mobile devices i would want only one of the 3 components to be shown with the ability of clicking 2 arrows to go through the news. Like a normal image carousel, but made of components. How can I achieve this? These are the components
The code where i put all the "news"
render() {
let content = <div>Loading...</div>;
if (!this.state.isLoading) {
content = (
<Aux>
<New
image={img1}
title={this.state.news[0].title}
text={this.state.news[0].text}
date={this.state.news[0].date}
classes="new-1"
/>
<New
image={img2}
title={this.state.news[1].title}
text={this.state.news[1].text}
date={this.state.news[1].date}
classes="new-2"
/>
<New
image={img3}
title={this.state.news[2].title}
text={this.state.news[2].text}
date={this.state.news[2].date}
/>
</Aux>
);
}
return content;
}
This is the "new" component
const New = props => {
const imageStyle = {
backgroundImage: `url(${props.image})`
};
return (
<div className={`new-wrapper ${props.classes}`}>
<div className="new-image" style={imageStyle}></div>
<div className="new-content">
<h4>{props.title}</h4>
<div className="text-wrapper">
<p>{props.text}</p>
</div>
<div className="date">
<span>{props.date}</span>
</div>
</div>
</div>
);
};
To achieve your desired result I would use a carousel plugin like https://react-slick.neostack.com/
You could set it to show three slides on desktop and just one on mobile so then you would get the arrows to go through the news cards.
I would also loop every element of the array by using the map function to render all the news. That way it would dynamically create a news card for every element on your state or array. See this example How to render an array of objects in React?
Hope this helps!
Related
I am experiencing an issue where the overflow properties of Tailwind are not working with react lists. I am wondering if this is just a simple mistake on my part or if there is a work around that I need to do.
Image to It Not Working
import CoinSummary from './CoinSummary'
const Holdings = ({ coins }) => {
return (
<div className='overflow-auto p-4'>
<h2 className='text-2xl text-center font-bold mt-4'>Holdings</h2>
{coins &&
coins.map((coin, index) => {
return <CoinSummary key={index} coin={coin} />
})}
</div>
)
}
export default Holdings
I want the list of coins to stay inside of the Holdings component and if it overflows, to have a scroll bar instead. However, as you can see in the photo, it doesn't seem to be working like I expected it to.
I was able to figure it out on my own. It was because I did not specify the height to be h-full
I am using the event object to try and create three images next to each other. I am running into an issue where because they are returned in order, they keep stacking vertically when I want them to be in two rows, with three items per row.
Here is my current code for App.js:
function App() {
let imgGen = [{img:""},{img:""},{img:""},{img:""},{img:""},{img:""}];
let images = imgGen.map((image1) => {
return <GenSlide data={image1}/>
});
return (
<div className="App">
<Entry />
{images}
</div>
);
}
Here is my code for the GenSlide class:
function GenSlide (props) {
return (
<div class="imagePackage">
<img alt="this image is busted" width="300px" src={props.data.image}/>
<button id="theButton">Save</button>
</div>
)
}
You should use the flexbox or grid layout to accomplish this.
By default a div is a block element which puts line breaks before and after each element. If you set them to inline-block there will still be spacing in between them.
For more info read https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
I have tried finding the answer to this on StackOverflow and there are some related posts (e.g. React Child Component Not Updating After Parent State Change) but I want to understand why this is not working...
I have a React application that will display a layout of character cards (that is, each card displays a different character). It uses a child component, CharacterBoard, that lays out the CharacterCards, which would be a grandchild component. I pass the characters down from the App to the CharacterBoard as props, and CharacterBoard in turn maps these out the CharacterCards.
The problem is that I want the state of the character to change when I click on one of them. Specifically, I want the revealed field to change. However, even though the state change is reflected in the array of characters in the App (that is, the revealed field changes correctly), and the change is reflected in the array of characters in CharacterBoard, but not in CharacterCard. In fact, my mapping does not seem to be called at all in CharacterBoard when the props change.
Do I need to use something like getDerivedStateFromProps in CharacterBoard and set the state of that component and then use the state to map the values down to CharacterCard? If so, why?
In short (tl;dr), can you pass props on down through the component chain and map them out along the way and still have all changes reflected automatically?
Thanks for any guidance.
If it helps, the render method of my App is
render() {
const {state: {characters}} = this
return (
<div>
<header>
</header>
<main>
<CharacterBoard
onCardSelected={this.onCardSelected}
rowSize={logic.ROW_SIZE}
characters={characters}
cardSize={this.CARD_SIZE}/>
</main>
</div>
);
}
that of CharacterBoard is
render() {
const {props: {characters, rowSize, cardSize,onCardSelected}} = this
const rowUnit = 12 / rowSize
const cardLayout = characters
.map((character, i) => (
<Col xs={6} sm={rowUnit} key={character.name}>
<CharacterCard
onCardSelected = {onCardSelected}
key={i + Math.random()}
character={character}
cardSize={cardSize}
/>
</Col>
)
)
return (
<div>
<Container>
<Row>
{cardLayout}
</Row>
</Container>
</div>
)
}
and finally CharacterCard has this render method
render() {
const {props: {character, cardSize}} = this
const {thumbnail, revealed} = character
const imgURL = `${thumbnail.path}/${cardSize}.${thumbnail.extension}`
const topCardClass = classNames('characterCard__card-back', {'characterCard__card-back--hidden': revealed})
console.log(revealed)
return < a href="/#" onClick={this.onCardSelected}>
<div className='characterCard__card'>
<div className={topCardClass}>
<img src="/images/card_back.png" alt=""/>
</div>
< div className='characterCard__card-front'>< img alt=''
src={imgURL}/>
</div>
</div>
</a>
}
Doh! A simple forgetting to setState in App. Knowing that it should work made me go back through the code one more time and see that, indeed, it was a stupid error on my part.
I want to achieve a carousel like Materialize.
Have an API from where I am fetching the data, so according to Materialize
I compared the console or Materialize default and my rendered components.
I guess the problem is, it's not inheriting the properties of carousel-item
Class carousel-item is supposed to Render inside of Class carousel.
<div className="carousel">
// These are supposed to be dynamic, below component is not present here
<div className="carousel-item">
</div>
</div>
How I am trying to render the data is in this manner.
renderAlbums(){
return this.state.albums.map(album =>
<Card song={album.name} singer={album.artist_name} src={album.cover_photo_url}/>
);
}
Rendered the data <Card />(It contains the class of carousel-item), which is supposed to place Card containing class of carousel-item.
class Carousel extends Component {
state = { albums: [] };
componentWillMount() {
axios.get('https://cors-anywhere.herokuapp.com/https://stg-resque.hakuapp.com/albums.json')
.then(response => this.setState({albums: response.data}));
}
renderAlbums(){
return this.state.albums.map(album =>
<div className="carousel-item"><Card key={album.name} song={album.name} singer={album.artist_name} src={album.cover_photo_url}/></div>
);
}
render() {
return (
<div className="carousel center">
{this.renderAlbums()}
</div>
);
}
}
export default Carousel;
This is my Card component
class Card extends Component {
render() {
return (
<div className="card z-depth-4">
<div>
<img src={this.props.src} />
</div>
<p>{this.props.song}</p>
<div className="singer">{this.props.singer}</div>
</div>
);
}
}
export default Card;
EDIT:
Want that content to display like this.
But it's not working the way it's expected.
Please suggest me, what am I doing wrong?
In axios.get, I see that you are using proxy link.
One reason is, it can be creating problems.
Other reason can be you are trying to put carousel-item into carousel.
Try adding center class to both i.e. carousel as well as carousel-item.
Check if these works.
First of all, there is nothing in your Carousel that says which element is active. You need to have a state variable that points to the active element.
Then you only need to draw [-2, -1, 0, 1, 2] offsets vs the active one. And each rendered card needs to know which offset to know their style.
Using React 0.12.2 and given a layout component, e.g. a tray:
<div className="tray">
<div className="tray__item tray__item--left" data-width="260px">
Load a component in the left tray
</div>
<div className="tray__item tray__item--center">
Load a component in the center tray
</div>
<div className="tray__item tray__item--right" data-width="100%">
Load a component in the right tray
</div>
</div>
I would like to be able to insert arbitrary components into each of the contents, passing them as args to this component.
Perhaps something like:
<Tray left={Component1} center={Component2} right={Component3}/>
I would also like to know how to pass an unknown amount of components e.g:
<Carousel items={Component1,Component2,Component3,Component4}/>
Just to be clear - these container components are "dumb" - they only care about sliding content - you should be able to pass whatever content (components) you want to them.
How can I do that and then render them? Thanks.
In the render method of Tray you can do
render: function() {
return (
<div className="tray">
{this.props.children}
</div>
);
}
Then in the component where your Tray lives you can do
<Tray>
<TrayItem position="left"/>
<TrayItem position="center"/>
<TrayItem position="right"/>
</Tray>
You should be able to keep nesting this pattern, i.e.
<Tray>
<TrayItem position="left">
<SomeComponent/>
</TrayItem>
<TrayItem position="center">
<div>
<AnotherComponent/>
</div>
</TrayItem>
<TrayItem position="right"/>
</Tray>
In this case TrayItem's render should also include {this.props.children}
The general principle is, you can put arbitrary components inside other components as long as the container component's render includes {this.props.children}.
Thanks for the answer Adam Stone + SimpleJ.
var Tray = React.createClass({
render: function () {
return (
<div className="tray">
{this.props.children}
</div>
);
}
});
var TrayItem = React.createClass({
render: function () {
return (
<div className="tray__item">
{this.props.children}
</div>
);
}
});
<Tray>
<TrayItem>
<ComponentA/>
<ComponentAB/>
</TrayItem>
<TrayItem>
<ComponentB/>
</TrayItem>
<TrayItem>
<ComponentC/>
</TrayItem>
</Tray>
You should just create a container component that has multiple child components in its render function. You never want to pass a component in as a prop