Employing an odd/even toggle for assigning class names

Question

Employing an odd/even toggle for assigning class names

I need each this.state.title to be aligned based on a different classname.

I attempted using css flex boxes/nth-of-type/nth-child, but it didn't work well with React.

I'm utilizing this.state to access my objects.

My failed strategy

render: function () {
    let className
    var newVar = !someVar;

 switch(someVar) {
        case odd:
            className= "post-1 line";
            break;
        case even:
            className = "post-2 right-align line";
            break;
    }
    return (
          <article class={I WANT THIS TO FILL FROM SWITCH}>           
              <div class="s-12 l-6 post-image">                   
                 <a href="post-1.html">
                 <img src="/post1.jpg">
                 </a>                
              </div>          
              <div class="s-12 l-5 post-text">
                 <a href="#">
                    <h2>{this.state.title}</h2>
                 </a>
                 <p>Testing           
                 </p>
              </div>

              <div class="s-12 l-1 post-date">
                 <p class="date">28</p>
                 <p class="month">feb</p>
              </div>
           </article>

    );
  }
});

javascript css reactjs

Answer 1

Answer №1

When using React, remember to rewrite the class attribute as className. For more details, check out this React documentation.

    render: function () {
        let className = ['post-2 right-align line', 'post-1 line'][someVar % 2];
        return (
            <article className={className}>
                <div className="s-12 l-6 post-image">
                    <a href="post-1.html">
                        <img src="/post1.jpg"/>
                    </a>
                </div>
                <div className="s-12 l-5 post-text">
                    <a href="#">
                        <h2>{this.state.title}</h2>
                    </a>
                    <p>Testing
                    </p>
                </div>

                <div className="s-12 l-1 post-date">
                    <p className="date">28</p>
                    <p className="month">feb</p>
                </div>
            </article>
        );
    }

Answer 2

When using React, remember to rewrite the class attribute as className. For more details, check out this React documentation.

    render: function () {
        let className = ['post-2 right-align line', 'post-1 line'][someVar % 2];
        return (
            <article className={className}>
                <div className="s-12 l-6 post-image">
                    <a href="post-1.html">
                        <img src="/post1.jpg"/>
                    </a>
                </div>
                <div className="s-12 l-5 post-text">
                    <a href="#">
                        <h2>{this.state.title}</h2>
                    </a>
                    <p>Testing
                    </p>
                </div>

                <div className="s-12 l-1 post-date">
                    <p className="date">28</p>
                    <p className="month">feb</p>
                </div>
            </article>
        );
    }

Answer 3

Answer №2

Is the variable 'someVar' a local variable? You could attempt to include it in the component's state and update it using this.setState as needed.

Answer 4

Is the variable 'someVar' a local variable? You could attempt to include it in the component's state and update it using this.setState as needed.

Answer 5

Answer №3

Below is an example showcasing the entire code snippet:

        class Post extends Component {
            render() {
                let {index, title} = this.props;
                let className = ['post-2 right-align line', 'post-1 line'][index % 2];
                return <li key={index} id={index} className={className}>{title}</li>
            }
        }

        class PostList extends Component {
            render() {
                let i = 0;
                let postFactory = (props = {}) => {
                    return <Post key={i} index={i++} {...props}/>
                };
                return (<ul>
                    {this.props.posts.map((item) => postFactory({title: item}))}
                </ul>);
            }
        }

        ReactDOM.render(
            <PostList posts={['first post', 'second post', 'last post']}/>,
            document.getElementById('container')
        );

Answer 6

Below is an example showcasing the entire code snippet:

        class Post extends Component {
            render() {
                let {index, title} = this.props;
                let className = ['post-2 right-align line', 'post-1 line'][index % 2];
                return <li key={index} id={index} className={className}>{title}</li>
            }
        }

        class PostList extends Component {
            render() {
                let i = 0;
                let postFactory = (props = {}) => {
                    return <Post key={i} index={i++} {...props}/>
                };
                return (<ul>
                    {this.props.posts.map((item) => postFactory({title: item}))}
                </ul>);
            }
        }

        ReactDOM.render(
            <PostList posts={['first post', 'second post', 'last post']}/>,
            document.getElementById('container')
        );

Employing an odd/even toggle for assigning class names

My failed strategy

Answer №1

Answer №2

Answer №3

Similar questions

Bring in all subdirectories dynamically and export them

Is it feasible to exclude certain CSS files in an HTML Master page within the .NET framework?

Is it possible to retrieve a value within nested objects using only a single string as the reference?

Discovering the specific style within an inspect-element and transferring it to a JavaScript file

Javascript - Transforming tabular information into a hierarchical tree structure (JSON)

Tips on displaying the number of items ordered above the cart icon

altering the directory for bower installations on specific repositories exclusively

Issues with Sound Not Playing When Button is Clicked in Python Flask

Add a unique design to a list element with CSS

Using Swagger with Next.js

Ways to utilize the useRef method within the useContext hook while implementing Typescript

Develop an Innovative Data-Driven Application using AJAX Technology

Button for Selecting Colors

What is the reason that I am unable to utilize the React and Express libraries from the global space when installed via npm i -g pkgName, yet I am able to use react-scripts from the global space?

Having trouble assigning the class property in Angular 5

Show specific button text when no file has been selected

Ways to confirm the validation of radio buttons in a form and implement CSS

Video Background, Adjusting Scale to Fit Height and Cropping Width as Necessary

Steps for Building and Exporting a Next.js Project Without Minification and Optimization

JavaScript application throwing error: "require is not defined"