Organizing an array of objects within MUI cards based on social media platforms

I'm currently developing an application that showcases athlete data in a grid layout using MUI Grid. The colored borders on the left side of each card are determined by the corresponding social network associated with that athlete.

https://i.sstatic.net/BdBLE.png

My goal is to create separate columns for each social network - Facebook, Instagram, and Reddit. This way, all cards within the same column will have matching colors.

However, I am facing challenges in achieving this as Mui seems to be arranging the data row by row instead of column by column, even though my API data is already sorted by social network.

Below is the code snippet for rendering the athletes' cards:

import React from 'react'
import { AthleteCardContainer, AthleteImage, AthleteDetailsContainer, TopContainer, BottomContainer, FBLogo, RedditLogo, InstaLogo, LinkIconLogo } from '../styles/athlete-styles'

export const AtheleteCard = ({athlete}) => {

    function numFormatter(num) {
        // Number formatting logic
    }

  return (
    <AthleteCardContainer social={athlete.platform}>

        <AthleteImage src={athlete.profileImage}/>

        <AthleteDetailsContainer>
            <TopContainer>
            <h1>{athlete.name}</h1>
            <span>@{athlete.handle}</span>
            </TopContainer>
            <BottomContainer>
          
            <h3>{athlete.platform === "Instagram" ?  <InstaLogo/> : athlete.platform === "Facebook" ? <FBLogo/> : athlete.platform === "Reddit" ? <RedditLogo/> : null} {numFormatter(athlete.subscriberCount)}</h3>
            <a href={athlete.url}><p><LinkIconLogo/>{athlete.url}</p></a>
            </BottomContainer>
        </AthleteDetailsContainer>

    </AthleteCardContainer>
  )
}

And here is the code related to displaying the grid itself:

export const Athletes = () => {
  const dispatch = useDispatch();
  const athletes = useSelector(state => state.athleteReducer.athletes.athletes)
  
  useEffect(() => {
    dispatch(actions.getAthletes());
  }, [])
  
  console.log(athletes, "from selector")

  return (
  <div>
    <Grid container >
    {athletes.map(athlete => (
      <Grid item xs={12} md={6} lg={4}>
      <AtheleteCard athlete={athlete}/>
    </Grid>
    ))}
    </Grid>
  </div>
  );
};

Answer №1

If you want to align items in columns, consider using the following code snippet:

<Box sx={{ flexWrap: 'wrap', display: flex}}>
    <Grid
      container
      direction="column"
      justifyContent="flex-start"
      alignItems="flex-start"
    >

Give it a try and see if it meets your requirements. You can also replace the div tag with Box for comparison.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Please indicate the decimal separator for the Number() function

UPDATE : TITLE IS MISLEADING as testing showed that Number() returned a dot-separated number and the HTML <input type="number"/> displayed it as a comma due to locale settings. I changed to using an <input type="text"/> and filtered keydown lik ...

React is pulling data from a distant API, but the result is different than I had anticipated

After creating the file LatestBookSlide.js, I included the following code: class LatestBookSlide extends Component { componentDidMount() { fetch('http://api/book/hello') .then(function (response){ console.log(response); ...

Changing the event when a class is active in Vue3

Question I am looking for a way to trigger an event when the 'active' class is added to an element. How can I achieve this? I believe this could potentially be accomplished using a watcher method, but I am unsure how to watch for the applicatio ...

The Kendo Grid is refusing to show up within the popup window

I am new to using Angular 2 and Kendo UI. Currently, I am attempting to include a grid inside my pop-up window. While I have successfully displayed the pop-up, adding the grid has proven challenging. The grid is not appearing as expected ...

The app is having trouble loading in Node because it is unable to recognize jQuery

I am currently using Node to debug a JavaScript file that includes some JQuery. However, when I load the files, the $ sign is not recognized. I have installed JQuery locally using the command npm install jquery -save-dev. The result of "npm jquery -versio ...

Tips for representing entire months as object keys using numerical values

Currently, I find myself a bit puzzled as to why my code is not functioning as expected, and I am hopeful that you all could assist me in solving this issue. The data structure I am working with consists of years and corresponding months. chosenMonths = { ...

Google Locations API + React JS + Node.js data not returning

I would like to express my gratitude in advance for any assistance provided. I am currently exploring the development of an application using data from the Google Places web services API. I am utilizing AngularJS, PHP, and HTML for this project. Unfortunat ...

Technique for identifying a sequence within a longer numerical series

As I ponder this puzzle for what seems like an eternity, I humbly turn to you for a possible solution. A lengthy number resembling this one: 122111312121142113121 It is crucial to note that no numbers exceed four or fall below one. Now my quest is to une ...

Error Nirvana In React.js Program

Looking for some guidance on integrating a login feature into my React-based To-Do list application. I'm aiming to set the login page as the initial landing page and then redirect users to the Dashboard after successful login. Although I don't ha ...

Attempting to retrieve JSON data and present it in a grid layout

I have a JSON file with the following data: { "rooms":[ { "id": "1", "name": "living", "Description": "The living room", "backgroundpath":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrsU8tuZWySrSuRYdz7 ...

Unable to send a namespaced action from a different module: [vuex] action type is not recognized

In my coding project, I am working with two different modules called activities and alerts. One of the requirements is that whenever an activity is added, I need to trigger an alert action with the namespaced identifier alerts/SHOW. This functionality was ...

Is there a way to transform a time string, for instance "8:02 AM", into a sortable field?

I am currently working with a MongoDB database that stores times as strings, and I want to filter queries based on specific time ranges. For instance, the time fields in my database are formatted as "8:02 AM" and "10:20 PM", and I am looking to refine my ...

Gulp: Adding to Dest without Overwriting

I have the following code snippet: gulp.task('concat-uglify-js', function() { return gulp.src(src + 'js/*.js') .pipe(concat('angular-filemanager.min.js')) .pipe(uglify()) .pipe(gulp.dest(dst)) }); gulp.task(&ap ...

Can you explain the distinction between the controls and get methods used with the FormGroup object?

I have encountered an interesting issue with 2 lines of code that essentially achieve the same outcome: this.data.affiliateLinkUrl = this.bookLinkForm.controls['affiliateLinkUrl'].value; this.data.affiliateLinkUrl = this.bookLinkForm.get(' ...

Building a custom Vue layout within Laravel UI

Currently, I am utilizing Laravel 8 along with laravel/ui 3.4 for the front end of my project. My goal is to establish a fixed sidebar, footer, and a designated area for the router-view. In my routes/web.php file: Route::view('/{any}', 'hom ...

When incorporating conditional statements into your code, make sure to utilize the tags <script> along with

I have some script tags as shown below: <script src="cordova-2.5.0.js"></script> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery.mobile-1.1.1.min.js"></script> <script src="js/jquery.xdomainajax ...

What is the best way to create a function that automatically resumes audio playback 3 seconds after the pause button is clicked?

I am looking to develop a basic webpage with an autoplay audio feature. The page would include a "pause" and "play" button. I aim to implement a function where clicking the "pause" button would stop the audio, but after 3 seconds, it would automatically re ...

Troubleshooting a JavaScript error while attempting to execute a function from a

I have been working on a new JavaScript library named TechX. Check out the code snippet below: (function(){ function tex(s){ return new tex.init(s); }; //initiate the init selector function tex.init = function(s ...

Make sure to pay attention to the messageCreate event within a direct message channel on discord

I've come across this question repeatedly, and despite trying numerous suggestions, I still can't seem to make it work. Currently, I'm resorting to logging the messageCreate event, but unfortunately, that isn't yielding any results. Any ...

Choose a specific item from the available list of elements within a Material-UI Select component

How can I preselect the element with the ID 3 in my list? If no preselected element is provided, it should automatically show the disabled item. Currently, the select box only displays Choose your option, and if I try to pass down alreadySelected, it doesn ...