I'm developing a Yes or No question based user interface, where based on the user selection I need to load specific content and also allow users to move to previously selected question.

Below is the Data structure from which I need to load the questions.

  const data = {
    preQuestions: {
      landingPage: {
        heading: 'This is the ladning page',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1A',
          },
          noButton: {
            text: 'No',
            action: '1B',
          },
        },
      },
      '1A': {
        heading: 'This is the 1A Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1C',
          },
          noButton: {
            text: 'No',
            action: '1D',
          },
        },
      },
      '1B': {
        heading: 'This is the 1B Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1E',
          },
          noButton: {
            text: 'No',
            action: '1F',
          },
        },
      },
      '1C': {
        heading: 'This is the 1C Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1G',
          },
          noButton: {
            text: 'No',
            action: '1H',
          },
        },
      },
      '1D': {
        heading: 'This is the 1C Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1I',
          },
          noButton: {
            text: 'No',
            action: '1J',
          },
        },
      },
    },
  };

Below is my logic to render the questions on user action.

  const content = data.preQuestions;

  const loadNextCompnent = (actionId) => {
    console.log(actionId);
    return renderQustionComponent(actionId);
  };

  const renderQustionComponent = (key) => {
    console.log(content[key]);
    return (
      <div id={key}>
        <a href="#">Previous question</a>
        <h1>{content[key].heading}</h1>
        <button
          onClick={() =>
            loadNextCompnent(content[key].buttons.yesButton.action)
          }
        >
          {content[key].buttons.yesButton.text}{' '}
        </button>
        <button
          onClick={() => loadNextCompnent(content[key].buttons.noButton.action)}
        >
          {content[key].buttons.noButton.text}{' '}
        </button>
      </div>
    );
  };

Problem is, when user clicks on the yes or no button nothing happens.

How to do I move to the previous question with smooth scroll?

Below is the stackblitz link. Please guide me.

https://stackblitz.com/edit/react-ts-eugpwn?file=App.tsx

CodePudding user response：

Hello i have created the following example with react-router-dom so you can have a look in the following demo:

https://react-ts-31wshc.stackblitz.io

App.tsx

import * as React from 'react';
import './style.css';
import RenderQuestionComponent from './RenderQuestionComponent';
import Test from './Test';
import Page1 from './Page1';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </BrowserRouter>
  );
}

Page1.tsx

import * as React from 'react';
import { useNavigate } from 'react-router-dom';
export default function Page1() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>THIS IS THE PAGE 1 </h1>
      <button
        onClick={() => {
          navigate('/test'); // you will go one page back
        }}
      >
        GO TO TEST PAGE{' '}
      </button>
    </div>
  );
}

Test.tsx

import * as React from 'react';
import { useNavigate } from 'react-router-dom';
export default function Test() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>TESTING </h1>
      <button
        onClick={() => {
          navigate(-1); // you will go one page back
        }}
      >
        GO BACK{' '}
      </button>
    </div>
  );
}

You can have a look on this website to learn more about react-router-dom:

https://reactrouter.com/en/main - current version 6.4.1

CodePudding user response：

Your logic for calling keys from objects are fine, the problem is that you do not have sufficient logic to update dom and see the changes. Here is the working version which I updated it with states

https://react-ts-z8clfj.stackblitz.io

import * as React from 'react';
import './style.css';

export default function App() {
  const data = {
    preQuestions: {
      landingPage: {
        heading: 'This is the ladning page',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1A',
          },
          noButton: {
            text: 'No',
            action: '1B',
          },
        },
      },
      '1A': {
        heading: 'This is the 1A Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1C',
          },
          noButton: {
            text: 'No',
            action: '1D',
          },
        },
      },
      '1B': {
        heading: 'This is the 1B Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1C',
          },
          noButton: {
            text: 'No',
            action: '1D',
          },
        },
      },
      '1C': {
        heading: 'This is the 1C Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1A',
          },
          noButton: {
            text: 'No',
            action: '1B',
          },
        },
      },
      '1D': {
        heading: 'This is the 1D Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1B',
          },
          noButton: {
            text: 'No',
            action: '1C',
          },
        },
      },
    },
  };

  const [active, setActive] = React.useState<any>(
    data.preQuestions['landingPage']
  );

  const content = data.preQuestions;

  const loadNextCompnent = (actionId) => {
    setActive(actionId);
  };

  const renderQustionComponent = () => {
    console.log('I am active', active);
    return (
      <div>
        <a href="#">Previous question</a>
        <h1>{active?.heading}</h1>
        <button
          onClick={() =>
            loadNextCompnent(content[active?.buttons?.yesButton?.action])
          }
        >
          {active.buttons.yesButton.text}{' '}
        </button>
        <button
          onClick={() =>
            loadNextCompnent(content[active?.buttons?.noButton?.action])
          }
        >
          {active.buttons.noButton.text}{' '}
        </button>
      </div>
    );
  };

  return <div>{renderQustionComponent()}</div>;
}