Modify existing code to what Im more familiar with
Tags: react, help, motivation, javascript
Published: 2021-02-22 14:03:42

Hi all, I do not know if this is an acceptable question for this foram. But i haven't been lucky on Stack overflow. 

My question is related to modifying some code I found online. I'm new to React. And Im trying to learn as i go. Currently Im stuck on making a blur on scroll component. But I have become familiar with a curtain way the structure should look. I will post the code I found first followed by what I am used to seeing. Any feedback is welcome. I ideally would like to modify this code into the way I understand But alternatively if somebody could show me how to implement this code as is that would also be amazing.

The code I found... Written entirely in the index.js file. And  it has many functions. Please see link below.

https://codesandbox.io/s/crazy-turing-jivgb?file=/src/index.js:0-3520

The Structure I am familiar, Which is all inside of its own file linked to the App.js file. And the code is written inside of class Home extends Component. And towards the end the file gets called. And there is no state in the first code where there is in the second code. And the way it was explained is that state is to change values. So that all confuses me. 

import React, { Component } from 'react';
import './Home.css';
import video from './home-bg.mp4';
import Parallax from '../Parallax';

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text:"This is sample text",
      text2:"This is sample text for text2",
      count:0,
      show:"",
      show2:"",
    }
    this.update = this.update.bind(this);
  }
  
  componentDidMount() {
    this.timerID = setInterval(
      () => this.update(),
      100
    );
  }
  
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  
  update(){
    const counter = this.state.count;
    const text = this.state.text;
    const text2 = this.state.text2;
    const letter = text.charAt(counter);
    // Note: It'll be empty string for negative index
    const letter2 = text2.charAt(counter - text.length);
    const textlength = text.length + text2.length;
    //let text += letter;
    console.log("counter : " + counter + " / letter : " + letter);
    console.log("counter : " + counter + " / letter2 : " + letter2);
    
    if(counter <= textlength){
    this.setState({
      show: this.state.show + letter,
      show2: this.state.show2 + letter2,
      count: this.state.count + 1,
    });
    }else{
      clearInterval(this.timerID);
    }
  };

  render() {
    return (
      <div>
        <section id="Home">
          <video className='videoTag' autoPlay loop muted>
        <source className='box' src={video} type='video/mp4' />
          </video>
                <div className="overlay">
{/* <img src="media/profile.jpg" className="profile-bg" /> */}
<Parallax speed="1.4">
                <div className='text-container relative tc top--5'>
              <h1 className='Home-Header ma2 fw2 ttu white'>{this.state.show}</h1>
              <hr className='rounded relative top--3 ml-auto mr-auto'></hr>
              <h2 className='Home-Footer i fw1 white'>{this.state.show2}</h2>
            </div>
            </Parallax>
          </div>
        </section>
      </div>
    );
  }
}

export default Home;

I hope that i explained what i need clearly enough. But please let me know if you need more info.

If any body could assist in helping me with this it would be greatly appreciated.