Search⌘ K
AI Features
Home
Courses
Quick Start Full Stack Web Development

Making a Collatz Conjecture Application: String Output

Explore how to preprocess values in React components by using lifecycle methods such as the constructor and render. Learn best practices for managing string outputs efficiently by building a Collatz Conjecture application. Understand how to use super(props) in constructors to initialize component state and avoid common errors.

We'll cover the following...

Preprocessing the values

So far, the attributes and content have just been plugged into the rendering. We can do a lot more by pre-processing the values using the full power of JavaScript. As an example, we use a number to compute a string, which is then rendered.

JavaScript (JSX)
import React, { Component } from 'react';
class Collatz extends Component { render() {
    const { number } = this.props;
        // WARNING: This code reruns with every rendering
        let x = number;
        let outputString = x.toString();
        while (typeof x == 'number' && x !== 1) {
            if ((x % 2) === 1) { x = 3*x + 1;
            } else {
                x = x/2;
                };
                outputString += ' ' + x; };
                return (
                    <div className="Collatz">
                        <h2>Collatz Sequence for {number}</h2>
                        <p>{ outputString }</p> 
                    </div>
                );
            }
        }
class App extends Component { 
    render() {
        const number = 17; const wikilink ='https://en.wikipedia.org/wiki/Collatz_conjecture';
        return (
            <div className="App">
                <h1>Collatz Conjecture</h1>
                    <p>The <a href={wikilink}>Collatz Conjecture</a>&nbsp;
                    states that for any positive integer, <i>x</i>,
                    repeatedly applying <i>3x + 1</i> if odd and 
                    <i>x/2</i> if even will eventually lead to 1.</p>
                <p>No one knows if this is true.</p>
                    
                <Collatz number={number} /> 
            </div>
        );
    }
}
export default App;

You can perform as many computations as you like in the render method. In practice, however, this is a bad idea.

Lifecycle method

...