Control Components' execution in React

I'm working in react.js, I would to avoid the execution of 2 components meanwhile the user input some text, the workflow is like this:

  1. the user enter some text
  2. the text's length is displayed
  3. A second component validate text's length
  4. A third component split the text

This is my sourcecode:

import React, { Component } from 'react';
import ValidateText from './ValidateText';
import CharText from './CharText.js'
import './hwork02.css';

/* general purpose:
1. Input any text
2. Validate its lenght (min and max)
3. Display each letter as a char
4. if the user clicks on each one, it has to be deleted
class based components
*/
class TextMe extends Component{
    
    state = {
        myText: '',
    }

    updateTxtHandler = (event) => {
        //ejemplo de codigo mala practica y que no es ES6
        this.setState({
            myText: event.target.value,
        });

    }

    render(){   
        return(
            <div className="cajatipo1">
                <h1>Homework02: Text2Chars</h1>
                <div>
                    <h3>Please type any text you want</h3>
                    <input type="text" width="80" placeholder="Type any text greater than 3 characters"
                    value={this.state.myText}
                    onChange={this.updateTxtHandler}
                    />
                    <h3>Using "state" to update this control simultaneously:</h3>
                    <label>{this.state.myText}</label> 
                    <p>
                        <ValidateText myTxtLength={this.state.myText.length} />
                    </p>
                    <p>
                        <CharText text2Char={this.state.myText.split("")} />
                    </p>
                </div>
            </div>    
        )
    }
}

export default TextMe;

The problem I'm dealing with is how to avoid the execution of ValidateText and CharText for the first time? I would like they are running when the user is typing text. So, any suggestions will be awesome.

Thank you so much



from Recent Questions - Stack Overflow https://ift.tt/3tSJrIw
https://ift.tt/eA8V8J

Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)