Modify existing code to what Im more familiar with

Wayne — Mon, 22 Feb 2021 14:03:42 +0000

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 (

{/* */}

{this.state.show}

{this.state.show2}

);
}
}

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.

DEV Community: Wayne

Modify existing code to what Im more familiar with

{this.state.show}

{this.state.show2}