How to go through a JSON with buttons in ReactJS

Question

I want to move through the contents of a JSON file with buttons.

This is the basic structure of my JSON:

[
    {
        "page": "1",
        "required": "true",
        "question": "lorem ipsum",
    },
    {
        "page": "2",
        "required": "true",
        "question": "lorem ipsum dolor",
    }
]

I'm building a multi-step form and I want to get the questions from this JSON. Is there any way for me to have a Next button, that moves one index forward in the JSON file, and displays the info in that index? The page identifier is unique to every object.

I'm new to React, so any explanations will be appreciated!

You need to load the JSON. There are a number of ways of doing that. Once parsed, you'll have an array of objects, and rendering that is explained in the documentation. — Heretic Monkey
– Heretic Monkey, Commented Nov 7, 2022 at 14:17

Alexis · Accepted Answer · 2022-11-07 14:38:40Z

In my opinion, in order to iterate through the questions of your JSON, you'll first need to parse it by using JSON.parse() (documentation).

So per exemple, let's say your component looks like this :

function Form() {
    [questions, setQuestions] = JSON.parse(your_json);
    [currentQuestion, setCurrentQuestion] = 0;

    function nextQuestion {
        setCurrentQuestion = currentQuestion + 1;
    }

    return (
        <div>
            <label>{{ questions[currentQuestion].question }}</label>
            <input type="text" />
            <button onclick={ nextQuestion }>Next Question</button>
        </div>
    );
}

By doing this, you'll parse the JSON text, changing it to an object format, and make you being able to call any value. Then we have a counter and we will be able to change it's value by calling setCurrentQuestion. The method nextQuestion() does exactly this.

Then, in our JSX, we can display the question based on it's position in the JSON, and go to the next question by clicking the button. React will react to the value change by itself and then, change the question value automatically.

I hope that my answer help while being clear enough and I didn't do any mistake typing it ^^

Collectives™ on Stack Overflow

How to go through a JSON with buttons in ReactJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related