The tags keep on piling up vertically, I want to make it pile up horizontally

Issue

When I click the plus button, the text just piles up vertically, how do I make them in a straight line. I think the problem has to do with this part of the code

    const tagsContainerStyle = {
        display: 'flex',
        flexDirection: 'row', // Display tags horizontally
        alignItems: 'center',
        flexWrap: 'wrap', // Allow tags to wrap to the next line
        marginTop: '10px',
        marginBottom: '10px', // Add marginBottom to create space between rows
    };

    const tagStyle = {
        marginRight: '5px',
        marginBottom: '5px', // Add margin at the bottom to create space between rows
        backgroundColor: '#eee',
        padding: '5px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center', // Align text and remove button vertically
    };

But here is the full code just in case,

import React, { useState } from 'react';

const App = () => {
    const [tags, setTags] = useState([]);
    const [currentTag, setCurrentTag] = useState('');

    const handleTagChange = (event) => {
        setCurrentTag(event.target.value);
    };

    const handleAddTag = () => {
        if (currentTag.trim() !== '') {
            setTags([...tags, currentTag.trim()]);
            setCurrentTag('');
        }
    };

    const handleRemoveTag = (index) => {
        const updatedTags = [...tags];
        updatedTags.splice(index, 1);
        setTags(updatedTags);
    };

    const handleEnterPress = (event) => {
        if (event.key === 'Enter') {
            handleAddTag();
        }
    };

    const containerStyle = {
        display: 'flex',
        height: '100vh', // Adjust the height as needed
    };

    const leftContainerStyle = {
        flex: 1,
        backgroundColor: 'black',
        borderTopLeftRadius: '15px',
        borderBottomLeftRadius: '15px',
        position: 'relative',
        padding: '20px',
    };

    const friendsListStyle = {
        position: 'absolute',
        top: '5%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        color: 'white',
        fontSize: '25px',
        fontFamily: 'Arial, sans-serif',
    };

    const rightContainerStyle = {
        flex: 4,
        backgroundColor: 'white',
        borderTopRightRadius: '15px',
        borderBottomRightRadius: '15px',
        padding: '20px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'black',
        fontFamily: 'Arial, sans-serif',
    };

    const buttonStyle = {
        padding: '10px 20px',
        fontSize: '16px',
        color: 'white',
        backgroundColor: 'black',
        border: 'none',
        borderRadius: '8px',
        cursor: 'pointer',
        fontFamily: 'Arial, sans-serif',
        marginTop: '10px', // Adjust the marginTop for downward space
    };

    const inputStyle = {
        marginTop: '0px',
        padding: '8px',
        fontSize: '14px',
        borderRadius: '4px',
        border: '1px solid #ccc',
        marginRight: '10px',
        height: '20px', // Adjust the height as needed
    };


    const plusContainerStyle = {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        marginBottom: '10px', // Adjust the marginBottom for downward space
    };


    const tagsContainerStyle = {
        display: 'flex',
        flexDirection: 'row', // Display tags horizontally
        alignItems: 'center',
        flexWrap: 'wrap', // Allow tags to wrap to the next line
        marginTop: '10px',
        marginBottom: '10px', // Add marginBottom to create space between rows
    };

    const tagStyle = {
        marginRight: '5px',
        marginBottom: '5px', // Add margin at the bottom to create space between rows
        backgroundColor: '#eee',
        padding: '5px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center', // Align text and remove button vertically
    };

    const removeTagButtonStyle = {
        marginLeft: '5px',
        cursor: 'pointer',
    };

    return (
        <div style={containerStyle}>
            <div style={leftContainerStyle}>
                {/* Content for the left container */}
                <div style={friendsListStyle}>Friends List</div>
                <h1 style={{ fontFamily: 'Arial, sans-serif' }}>Left Container</h1>
            </div>
            <div style={rightContainerStyle}>
                {/* Content for the right container */}
                <h1 style={{ fontFamily: 'Arial, sans-serif' }}>Search for a person</h1>
                <div style={tagsContainerStyle}>
                    <input
                        type="text"
                        placeholder="Enter tags..."
                        style={inputStyle}
                        value={currentTag}
                        onChange={handleTagChange}
                        onKeyPress={handleEnterPress}
                    />
                    <div style={plusContainerStyle}>
                        <button style={buttonStyle} onClick={handleAddTag}>
                            +
                        </button>
                    </div>
                </div>
                <div>
                    {tags.map((tag, index) => (
                        <div key={index} style={tagStyle}>
                            {tag}
                            <span
                                style={removeTagButtonStyle}
                                onClick={() => handleRemoveTag(index)}
                            >
                                X
                            </span>
                        </div>
                    ))}
                </div>
                <button style={buttonStyle}>Search</button>
            </div>
        </div>
    );
};

export default App;

This is what it looks like

Solution

Looking through the JSX, it doesn't seem like you have any style attached to the parent div housing your tag elements. So maybe try adding a style for that div with its display set to flex that should help put the tags in a row.

```

 const tagOutputContainerStyle = {
  display: 'flex',
  alignItems:'center',
  flexWrap: 'wrap',
  maxWidth:'350px',
  border: '1px solid crimson', 
}



<div style={tagOutputContainerStyle}>
  {tags.map((tag, index) => (
  <div key={index} style={tagStyle}>
    {tag}
    <span style={removeTagButtonStyle}>X</span>
  </div>
  ))}
</div>

```

Checkout this link for the example: solution

Answered By - Nomso Ikem