Use flexbox in React

[darkmal]

Hi, FreeCoders. I need some help with flexbox. I’m not able to evenly distribute all components in a row with flexbox ‘justify-content’ - the components only stay in a column. It seems that React does not consider the components that were generated from props - it treats all as just one component.

App.js

            {Data.map((values)=>{
                return(
                    <>
                        <Meeting 
                            key={values.id}
                            imgsrc={values.imgsrc}
                            text={values.text}
                        />
                    </>
                )
            })}

Meeting.js

const Meeting=(props)=> {
    return(
            <div className="containerMeeting">
                <div className="containerCard">
                    <img src={props.imgsrc} alt="Girl" />
                    <p>{props.text}</p>
                </div>
            </div>
    );
};

Meeting.css

.containerMeeting {
    padding: 0px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

[JeremyLT]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[darkmal]

Thanks, for the help, JeremyLT!