-13

I am trying to learn React and there's a concept that I'm feeling pretty stuck on. I was hoping someone could help me and I've been trying to put effort into making a question post detailing my problem with excerpts of my code for reference and no matter how much time I've spent on formatting, I can't make any posts because it keeps giving me this same error:

"Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon."

I'd say I have spent a total of 2-3 hours just trying to make my post. I worked on it and troubleshooted for over an hour yesterday night erasing and re-pasting/re-formatting my code, doing my best to adhere to the format specifications that are being asked. There was one attempt where I literally spaced the indents (four spaces) by myself, counting the spaces on each line. I keep perfecting it to the point where it looks flawless in the preview section with all the formatting correct, color-coded identifiers and all. And still it's giving me this error. I gave up, came back today after reading up on the issue a little bit and spent some more time at attempting my post hoping for a different outcome but to no avail.

What do I have to do so that I am allowed to make a forum post? Can anyone tell me?

EDIT: Thanks to everyone that read my question and answered. It's been much appreciated. All right, I followed some advice from you guys in the comments section to make my question a little clearer. Basically, the question in particular concerns six files of code that I wanted examining.

EDIT 2: I just read Sonic's suggestion. I'm going to copy and paste my entire forum post here:


Hi guys. I am learning React, and in this one I am making a "personality quiz" app that spans three pages. I've spent quite a bit of time
watching/reading tutorials on how to make multi-page React apps using the "react-router" library but it doesn't seem I am getting any closer
to figuring this out.

So there are six files right now that we need to worry about. Inside the "app" folder of my React, I have these:

index.html (Main page)
secondpage.html (Second page -- let's just worry about this transition for now)
index.js (ReactDOM rendering of page elements)

Inside the "components" folder:
 -App.js (Main component for the page routers)
 -Content.js (Main page component)
 -SecondPage.js (Second page component)

Here is the code for each page:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Color Personality Quiz</title>
    </head>

    <body>
        <div id="content"></div>
    </body>
</html>

secondpage.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Color Personality Quiz</title>
    </head>

    <body>
        <div id="secondMain"></div>
    </body>
</html>

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import Content from './components/Content';
import SecondPage from './components/SecondPage';

import './style.css';


ReactDOM.render(
    <App />,
    document.getElementById('content')
);


ReactDOM.render(
    <Content />,
    document.getElementById('content')
);


ReactDOM.render(
    <SecondPage />,
    document.getElementById('secondMain')
);

App.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link, Redirect} from 'react-
router-dom';

import Content from './Content';
import SecondPage from './SecondPage';

class App extends React.Component {

    render() {

        return (

            <Router>
                <Switch>
                    <Route exact path="/" exact component={Content} />
                    <Route exact path="/secondPage" component={SecondPage} />
                </Switch>
            </Router>

        );
    }
}

export default App;

Content.js:

import React from 'react';
import { Route, Link } from 'react-router-dom';

import SecondPage from './SecondPage';

class Content extends React.Component {

        constructor(props) {
            super(props);
        }


        render() {

            return [

                <div id="header">
                    <h1>Welcome to the Color Personality Quiz </h1>
                </div>,

                <p>In this quiz, we will pick you a color based on your
                answered questions.</p>,
                <p>&nbsp;</p>,
                <p>You must answer all 25 questions to get a result.</p>,
                <p>&nbsp;</p>,
                <p>When you are ready to start the quiz, click the button
                below.</p>,

                /*
                <Link className="quizConfirm" role="button" to="/secondPage"
                onClick={this.handleClick()}>
                    Start
                </Link>
                */

                ];

        }

}

export default Content;

SecondPage.js

import React from 'react';
//var ReactDOM = require('react-dom');

class SecondPage extends React.Component {

    render() {
        return (
            <h3>You are here!</h3>
        );
    }
}

export default SecondPage;

So essentially, I am trying to figure out how to make it 
so that on the main page, I have a button that says 
Start and when I click it, I want the React app to 
redirect to the next page that will have all the 
quiz questions (secondpage.html).

The *link* in the Content.js file that programs the
information for the main page is greened out because
every time I try to implement a new link redirecting
to the second page, all the content in the

HTML vanishes off the page except for the 
radial-background I have. So all the 
words and images I have on my main 
page disappear.

The handleClick() function is a new method I'm trying 
to work out that I don't have fully coded in yet, but 
I have tried using other methods to program in a 
clickable button for the next page and have 
always been getting the same result 
described here.

I think it has to do with the way I am implementing 
the DOM renders in the index.js file, but I am not 
sure exactly what I have to do given every tutorial

I looked at neglects to talk about the index.js file.

So I'm not really sure how to wrap my head around this. 
I'd love to learn how because the React Router seems 
like the most efficient way to make multi-page React 
acts from what I've seen -- though I'm obviously 
willing to stand corrected if anyone disagrees 
and knows a better method. Ultimately I'm 
just here to learn.

If anyone can show me what I have to do next or at 
least point me to a good resource/article that can 
easily describe what I'm trying to do, it would 
be much appreciated. Thank you!

3
16

Your question is broad, asking for resources and it is unclear what does work and what doesn't work. I've done some editing of your raw text to get it into some shape but I find it difficult to extract the practical programming problem you have. It might well be this app still is in the design/whiteboard phase. Those don't fly well.

Things that are still missing from your question:

Do not post before you have those links. Do not assume you can leave them out under the excuse: I found nothing that worked

In your first and final paragraph I removed a lot of noise and I focused on asking one question which I thought that one mattered. If that isn't the case then it shows your question is unclear. Those paragraphs can still use some love by reducing stuff that isn't needed to address the problem you have.

I've fixed/added the lists in your text. I removed a lot of " and other special characters that might trip the quality check. I've added extra white lines where needed but reduced the whitespace and indentation in your code blocks.

I've added proper H3 heading for each file and a short paragraph to introduce those files. Please complete / correct the boilerplate text I put there.

Please make the final adjustments / additions and when complete, retry posting. I saw in the comment you're rate limited for 4 days so that is plenty of time to make these improvements.

Your post with my edits follows. You can click the edit link to grab the raw markdown.


I am making a personality quiz app that spans three pages. I've spent time on a multi-page React apps using the react-router library but I have the following problem: every time I try to implement a new Link redirecting to the second page, all the content in the HTML vanishes off the page except for the radial-background I have.

So there are six files right now that we need to worry about. Inside the app folder of my React, I have these:

  • index.html (Main page)
  • secondpage.html (Second page - let's just worry about this transition for now)
  • index.js (ReactDOM rendering of page elements)

Inside the components folder:

  • App.js (Main component for the page routers)
  • Content.js (Main page component)
  • SecondPage.js (Second page component)

Here is the code for each page:

app\index.html

This is the view for ....

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Color Personality Quiz</title>
        </head>
    
        <body>
            <div id="content"></div>
        </body>
    </html>

app\secondpage.html

This is the view for ....

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Color Personality Quiz</title>
        </head>
    
        <body>
            <div id="secondMain"></div>
        </body> 
    </html>

app\index.js

This is the index page. It has these issues: ...


import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import Content from './components/Content';
import SecondPage from './components/SecondPage';

import './style.css';


ReactDOM.render(
    <App />,
    document.getElementById('content')
);


ReactDOM.render(
    <Content />,
    document.getElementById('content')
);


ReactDOM.render(
    <SecondPage />,
    document.getElementById('secondMain')
);

components\App.js

In App.js I have the issue describe what you think the issue is

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link, Redirect} from 'react- 
router-dom';

import Content from './Content';
import SecondPage from './SecondPage';

class App extends React.Component {

    render() {

        return (

            <Router>
                <Switch>
                    <Route exact path="/" exact component={Content} />
                    <Route exact path="/secondPage" component={SecondPage} />
                </Switch>    
            </Router>
    
        );
    }      
}

export default App;

components\Content.js

In Content.js I do ....

import React from 'react';
import { Route, Link } from 'react-router-dom';

import SecondPage from './SecondPage';

class Content extends React.Component {

        constructor(props) {
            super(props);
        }
        
        
        render() {

            return [
                
                <div id="header">
                    <h1>Welcome to the Color Personality Quiz </h1>
                </div>,

                <p>In this quiz, we will pick you a color based on your 
                answered questions.</p>,
                <p>&nbsp;</p>,
                <p>You must answer all 25 questions to get a result.</p>,    
                <p>&nbsp;</p>,
                <p>When you are ready to start the quiz, click the button 
                below.</p>,
        
                /*
                <Link className="quizConfirm" role="button" to="/secondPage" 
                onClick={this.handleClick()}>
                    Start
                </Link>
                */
    
                ];

        }

}

export default Content;

components\SecondPage.js

This the secondpage it does ... *

import React from 'react';
//var ReactDOM = require('react-dom');

class SecondPage extends React.Component {

    render() {
        return (
            <h3>You are here!</h3>
        );
    }
}

export default SecondPage;

So essentially, I am trying to figure out how to make it so that on the main page, I have a button that says Start and when I click it, I want the React app to redirect to the next page that will have all the quiz questions (secondpage.html). The Link in the Content.js file that programs the information for the main page is greened out because every time I try to implement a new Link redirecting to the second page, all the content in the HTML vanishes off the page except for the radial-background I have. So all the words and images I have on my main page disappear.

The handleClick() function is a new method I'm trying to work out that I don't have fully coded in yet, but I have tried using other methods to program in a clickable button for the next page and have always been getting the same result described here.

I think it has to do with the way I am implementing the DOM renders in the index.js file, but I am not sure exactly what I have to do given every tutorial I looked at neglects to talk about the index.js file.

How do I implement the handleClick() function correctly?

4
  • 1
    Wow, that was awesome of you to go through all that effort creating such a comprehensive response. Thanks a lot for the advice. It'll be helpful to know going forward. From my perspective, I get the feeling that people don't want to see long-winded posts that detail every single step I've taken and resource consulted and just don't have the patience to read that much. If that amount of detail is advised then I'd definitely be willing to put forward the effort. How did you get the coding blocks set up? Did you do the ``` thing as well? – greenga95 May 23 at 19:36
  • 3
    You need to give us the context that is needed to reproduce your problem. if the code you have is what is minimal needed then so be it and yes, include it. The reason I say to include links is to help us understand on which path / track you are. I'm not saying this posts needs more text, it needs text that matters to solve your problem in the context you're in. – rene May 23 at 19:40
  • Yes, I did code fences. Here is the raw revision: meta.stackexchange.com/revisions/… – rene May 23 at 19:40
  • @greenga95 also please read idownvotedbecau.se/nomcve as well as other topics on that site and meta.stackoverflow.com/questions/260648/… and meta.stackoverflow.com/questions/261592/… – rene May 23 at 19:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .