Replacing input or text area with new element in React.js/JavaScript

Question

I'm currently programming a webapp, and I'm almost done. But now I'm at the most boring section-- bug hunting, Its a tool for writers to warm up. so its almost all focused on inputting text, When you press enter, the next prompt appears, however when this happens, not only does the text area remain. but you also have to press tab to go to the next box.

So here's what my script needs to do:

1: let user enter text into input 1

2: when user presses enter, grab the text entered

3: Load next question and textarea box 2

4: Unmount/delete old textarea box 1

5: Replace deleted box 1 with an element holding entered text, so the user can see what they entered, but can't go back and edit it.

6: Move cursor to next box so user doesnt have to press tab every time

My code: https://codepen.io/gooeyWolf/pen/GRjaEVR

<body> 
<head></head>
<div id="root"><div id="anid"></div></div>
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="text/babel">
//LOOK INTO IFRAME FOR STYLING
//import first1 from './'
//<link rel="stylesheet" href="styles.css">
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        step: 1,
        fileCount: 0,
        q_yet: 0,
        quoteIndex: 1,
        adjQ: '',
        metaphor: '',
        comparison: '',
        values: [''],
        userSen1: '',
        userSen2: '',
        userSen3: '',
        userSen4: '',
        userSen5: '',
        cookieGuess1: [0,],
        cookieList1: [''],
        prompt: '',
        prompts: [
            "Write a sentence in which the way a character performs some action that makes it clear their experiencing that emotion:",
            "Write a sentence describing the detail of set, the set dressing, or the atmosphere that conveys that emotion:",
            "Write something idk bro"
        ],
        questions: [
            {
            id: 1,
            label: 'Press enter when ready'
            },
            {
            id: 2,
            label: 'Heres a question',
            },
            {
            id: 3,
            label: 'anotha one',
            },
            {
            id: 4,
            label: 'last q',
            }
        ]};
    }
    //componentWillMount(){
        //this.randPrompt()
        //this.cookieJar1()
        //this.doStuff()\
    //}

    handleEnter = (index, event) => {
        if(event.key === 'Enter' && this.state.step < this.state.questions.length){
            this.state.q_yet = this.state.q_yet +1
            this.NextThing();                 
            
        }
    }
    NextThing = (next) => {
        this.setState((prev) => ({step: prev.step+1, values: [...prev.values, '']}));
    }

    handleChange = (index, event) => {
        event.persist()
        this.setState(state => {
        const values = state.values.map((item, j) => {
            if (j === index) {
            return event.target.value;
            } 
            else {
            return item;
            }
        });

        return {
            values,
        };
        });
    }
    
    render() {
        const { questions, step, q_yet, adjQ, values, quoteIndex} = this.state;
        return (
        <div>
            <div id="Header">
                <h1>aMuseBoot</h1>
                <br />
                <h3>Athletes stretch, musicians run scales, even meals start with an appetizer. Writers expect to just start writing.  There’s no transition. If we aren't ready, we procrastinate.  We need a warm up, a way to ease ourselves into our work, or sneak up on it. Welcome to aMuseBoot.</h3>
                <br />
                <h4>"Readiness is all" -Shakespeare</h4>
            </div>
            {questions.slice(0, step).map((question, index) => (
            <div key={question.id}>
                {question.id == 10 ? <span>{adjQ}<br/></span>:<span>{question.label}<br /></span>}
                {<textarea 
                name={"answer"+question.id}
                id={"answer"+question.id}
                value={values[index]} 
                onChange={e => this.handleChange(index, e)} 
                onKeyDown={e => this.handleEnter(index, e)} />}
            </div>
            ))}
        </div>
        );
        
    }
}
</script>
</body>

Any thoughts?

Answer 1

I figured it out. Basically just grab the element that you want gone and make style;display == "none". then set the innerHTML of a new paragraph element to equal the value of the text area box. Feel kinda dumb for asking now, Anyway, for any struggling noobies, here you go

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    step: 1,
    fileCount: 0,
    q_yet: 0,
    quoteIndex: 1,
    adjQ: '',
    metaphor: '',
    comparison: '',
    values: [''],
    userSen1: '',
    userSen2: '',
    userSen3: '',
    userSen4: '',
    userSen5: '',
    cookieGuess1: [0,],
    cookieList1: [''],
    prompt: '',
    prompts: [
        "Write a sentence in which the way a character performs some action that makes it clear their experiencing that emotion:",
        "Write a sentence describing the detail of set, the set dressing, or the atmosphere that conveys that emotion:",
        "Write something idk bro"
    ],
    questions: [
        {
        id: 1,
        label: 'Press enter when ready'
        },
        {
        id: 2,
        label: 'Heres a question',
        },
        {
        id: 3,
        label: 'anotha one',
        },
        {
        id: 4,
        label: 'last q',
        }
    ]};
}
//componentWillMount(){
    //this.randPrompt()
    //this.cookieJar1()
    //this.doStuff()\
//}

handleEnter = (index, event) => {
    if(event.key === 'Enter' && this.state.step < this.state.questions.length){
        this.state.q_yet = this.state.q_yet +1
        this.NextThing();                 
        
    }
}

NextThing = (next) => {
    const aID = `answer${this.state.q_yet}`
    const pID = `p${this.state.q_yet}`
    const getElem = document.getElementById(aID)
    const getP = document.getElementById(pID)
    const userInp = getElem.value;
    getP.innerHTML=userInp;
    getElem.style.display = "none";
    this.setState((prev) => ({step: prev.step+1, values: [...prev.values, '']}));
}
handleChange = (index, event) => {
    event.persist()
    this.setState(state => {
    const values = state.values.map((item, j) => {
        if (j === index) {
        return event.target.value;
        } 
        else {
        return item;
        }
    });

    return {
        values,
    };
    });
}

render() {
    const { questions, step, q_yet, adjQ, values, quoteIndex} = this.state;
    return (
    <div>
        <div id="Header">
            <h1>aMuseBoot</h1>
            <br />
            <h3>Athletes stretch, musicians run scales, even meals start with an appetizer. Writers expect to just start writing.  There’s no transition. If we aren't ready, we procrastinate.  We need a warm up, a way to ease ourselves into our work, or sneak up on it. Welcome to aMuseBoot.</h3>
            <br />
            <h4>"Readiness is all" -Shakespeare</h4>
        </div>
        {questions.slice(0, step).map((question, index) => (
        <div key={question.id}>
            {question.id == 10 ? <span>{adjQ}<br/></span>:<span>{question.label}<br /></span>}
            {<textarea 
            name={"answer"+question.id}
            id={"answer"+question.id}
            value={values[index]} 
            onChange={e => this.handleChange(index, e)} 
            onKeyDown={e => this.handleEnter(index, e)} />}
            <p id={"p"+question.id}></p>
        </div>
        ))}
    </div>
    );
    
}

Replacing input or text area with new element in React.js/JavaScript

Question

1 answers

solution1
0 ACCPTED 2021-01-25 21:07:28

Replacing input or text area with new element in React.js/JavaScript

Question

1 answers

solution1 0 ACCPTED 2021-01-25 21:07:28

solution1
0 ACCPTED 2021-01-25 21:07:28