TailwindCSS overflow-auto class not working with React Lists - javascript

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

Related

window.scrollTo() is not functioning properly in react ionic

I have a listing page in my application. When the user searches for any word the list will be displayed accordingly! To achieve this I am using two components(Let's say search and listing). When the search result is found the array will be passed to another component (i.e. listing component).
Now, the scroll-to-top button is not on the listing component. It is on the searching component. I am calling window.scrollTo(0,0) But nothing is working!
Here is the code:
const scrollToTop = () => {
window.scrollTo(0,0)
}
return (
<div className={`!overflow-y-auto container bg-satin-3 rounded-lg pt-3 pb-6 md:px-3 h-fit xl:pb-3 2xl:pb-2 lg:pb-4`} >
<ComponentCalled to display the listing />
<IonButton
onClick={() => scrollToTop()}
className="float-right"
>
Scroll to Top
</IonButton>
)
I have reuse your code and In my case it's working perfectly as shown below:
scrollToTop = () => { window.scrollTo(0,0); };
return (
<div className="css" >
<p>TOP</p>
<ComponentCalled name="! I'm working"/>
<button
onClick={() => this.scrollToTop()}
className="float-right"
>
Scroll to Top
</button>
</div>
);
https://stackblitz.com/edit/react-ts-vk1fle?file=index.tsx

React - Problems with function parameters for assigning values

I have a sidebar where it is possible to change the background of the sidebar as a background, I store pictures in the object, everything worked well for me until I decided to add a second property "color" inside the object, that is, in addition to changing the background, the color of the text also changes. it looks like this
I think that the essence is clear, but as I mentioned earlier, the problems started when I decided to add a second property, that is, the color of the text
The problem is that the color property does not work for me, that is, it works, but in this case the sidebar background does not work
My object looks very simple
import Bg from "../../SideBar/Background/mac.jpg"
import Pink from "../../SideBar/Background/pink.jpg"
import Anapa from "../../SideBar/Background/anapa.jpg"
const SideBarBackgrounds = [
{
SideBarWallpaper: Bg,
color: "red",
},
{
SideBarWallpaper: Pink,
color: "green",
},
{
SideBarWallpaper: Anapa,
color: "yellow",
},
].map((item) => {
return {
SideBarWallpaper: item.SideBarWallpaper,
color: item.color,
}
}
)
export default SideBarBackgrounds;
That is, I import the picture and apply it as the value for the SideBarWallpaper properties then create a second property named color and apply the string as the color
Then I use local storage to save the user changes.
export const CounterContext = createContext([]);
export default function ThemeDoc(props) {
const [SideBarBackground, SetSideBarBackground] = useState(JSON.parse(localStorage.getItem("BgKey")));
useEffect(() => {
localStorage.setItem("BgKey", JSON.stringify(SideBarBackground));
})
const ChangeSideBarWallpaper = (SideBarWallpaper) => {
localStorage.setItem('BgKey', JSON.stringify(SideBarWallpaper));
SetSideBarBackground(SideBarWallpaper);
}
return (
<div className="page-wrapper chiller-theme toggled">
<CounterContext.Provider value={{
SideBarWallpaperValue: [SideBarBackground, SetSideBarBackground],
}}>
<SideBar ChangeSideBarWallpaper={ChangeSideBarWallpaper} SideBarPageContent={SideBarPageContent} {...props} />
</CounterContext.Provider>
</div>
);
}
As you can see, I use React Context since I have a lot of themes and I import them in many files, in this case I deleted everything personal and left only the code that belongs to the background of the sidebar
Then I have a component called SideBarWallpaperContainer where I import my object, create a loop using a map, process each property from the object and finally import the SideBarWallpaperContainer component inside the SideBarModal component
export default function SideBarWallpaperContainer(props) {
const SideBarWallpaperList = SideBarBackgrounds.map((theme, index) => {
return (
<img key={index} width={"70"} height={"55"} src={theme.SideBarWallpaper}
className={"SideBar_Appearance_Select_Icon"}
onClick={() => props.ChangeSideBarWallpaper(theme.SideBarWallpaper)} alt={"Select Theme"}/>
);
})
return (
<>
{SideBarWallpaperList}
</>
);
}
SideBarModal.jsx
const DraggableDialog = (props) => {
...
return(
<SideBarWallpaperContainer {...props} />
...
);
}
Through props, I get the ChangeSideBarWallpaper method to change the background and color
And the color for the sidebar text I get using useContext it looks like this
SideBarMenu.jsx
export default function SideBarMenu(props) {
const {SideBarWallpaperValue} = React.useContext(CounterContext);
const [SideBarWallpaperTheme,] = SideBarWallpaperValue;
const SideBarWallpaperStyle = SideBarWallpaperTheme;
return(
<Link
style={{ color: SideBarWallpaperStyle && SideBarWallpaperStyle.color,}}>{item.name}
</Link>
);
}
Now when you roughly understand how all the logic works, I want to explain the problem. The problem is that either the sidebar color or the background does not work for me, please pay attention to the method
props.ChangeSideBarWallpaper (theme.SideBarWallpaper)}
When I use theme.SideBarWallpaper as a parameter inside the ChangeSideBarWallpaper method, only the background works for me and not the color, and this is of course logical, then I tried to apply 2 parameters, the color and the background, it looked like this
onClick={() => props.ChangeSideBarWallpaper(theme.SideBarWallpaper, theme.color)}
But in this case, only the background also worked and the only solution that remained for me to transfer the entire value, it looked like this
onClick={() => props.ChangeSideBarWallpaper(theme)}
And then I was surprised now only the sidebar color works for me but the background does not work, You can look at the picture (sorry if I'm so long and boring to explain :) I just want you to understand the problem as clearly as possible)
I decided to check if I get a picture and yes I get
Now that you understand the problem, I will be interested in hearing your advice, thank you for paying attention to my long question.
Before I demonstrate the solution, I would like to say that the problem lies with me, I, as always, introduced myself impatiently and inattentively: (it turns out that I forgot that in the SideBar component I get the SideBarBackground value in short, the code looked like this
const {someValue} = useContext(SideBarContext);
const {SideBarValue, SideBarWallpaperValue} = React.useContext(CounterContext);
const [SideBarTheme] = SideBarValue;
const [SideBarBackground] = SideBarWallpaperValue;
<div style={{backgroundImage: `url(${SideBarBackground})`}}>
...
</div>
Then I got the SideBarWallpaper value
<div style={{backgroundImage: `url(${SideBarBackground.SideBarWallpaper})`}}>
...
</div>

Carousel of components in React?

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!

Rendering Component in Carousel using React

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.

React children issue (typescript)

I will provide all the code needed for my issue, I am stumped as to how to solve this I have tried many things none of which worked.
export class JobBuilderOptimise extends React.Component<JobBuilderOptimiseProps & JobBuilderOptimiseDispatch> {
render() {
const {
jobPosting,
search,
previewByTemplate
} = this.props.pageState;
return (
<div className="optimise-page">
<Row>
<Col sm={7} >
<div className="optimise-panel">
{this.props.children}
</div>
</Col>
<Col sm={5}>
<div className="preview-panel">
<JobPostingControl jobDescription={jobPosting.data} isLoading={search.previewRequestState.isBusy || previewByTemplate.isBusy} leftSide={this.props.children}/>
</div>
</Col>
</Row>
</div>
);
}
this.props.children either displays JobBuilderModel.tsx or JobBuilderSearch.tsx. I can provide the code for each if neccessary but the main identifying factors I can find are the props:
interface JobBuilderModelProps {
pageState: BuilderState;
}
interface JobBuilderSearchProps {
pageState: SearchState;
}
and also the classNames of the container divs:
<div className="search-job-section">
...
</div>
<div className="model-job-section">
...
</div>
The reason I have provided these are because I have to figure out which of the two react components will be displayed (and I have been trying to distinguish the two in any way in order to identify which actually is being displayed but maybe that is not the right way to go about it), and based on that, have to pass a string into the JobPostingControl control that is also on the page. Let me know if any more details are needed.
If I understand you correctly the problem is how to find out what type of component is inside children of the JobBuilderOptimise component. If so - you can use type property of the child - that will return you type of the respective child.
Then you can test to see what inside to the code similar to:
if((child.type as any).prototype instanceof JobBuilderModel)
{
}

Categories