Display random text in React app with Math.random()

Question

I previously had embedded this JS code inside an HTML page with this:

    <SCRIPT LANGUAGE="JAVASCRIPT">
    var r_text = new Array (); 
    r_text[0] = "\"This is a test\""; 
    r_text[1] = "\"This is another\""; 
    r_text[2] = "\"This is a test\""; 
    r_text[3] = "\"This is another\""; 
    var i = Math.floor(r_text.length * Math.random()); 
    
    document.write("<center>" + 
    r_text[i]  + "</center>"); 
    </SCRIPT>

It allows me to define a bunch of sentences and have a random one displayed each time the page loads.

I am now re-doing my site as a React app (and using TailwindCSS FWIW).

I tried dropping it directly like below:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div class="container mx-auto">

      <div class="max-w-md mx-auto bg-white text-center text-6xl m-10 overflow-hidden md:max-w-2xl">
      site title
      </div>
    
    var r_text = new Array (); 
    r_text[0] = "\"This is a test\""; 
    r_text[1] = "\"This is another\""; 
    r_text[2] = "\"This is a test\""; 
    r_text[3] = "\"This is another\""; 
    var i = Math.floor(r_text.length * Math.random()); 
    
    document.write("<center>" + 
    r_text[i]  + "</center>");

This is not working, but I'm not sure how to make it compile.

Declare your variables before the return statement and then use <center>{r_text[i]}</centre> in the JSX although <centre> itself is deprecated so you should use something else. document.write has no place here (or anywhere else IMO) — Phil
– Phil, Commented Oct 26, 2021 at 1:37

demark-pro · Accepted Answer · 2021-10-26 01:47:25Z

2

In ReactJS, it is advisable to perform all calculations before rendering the content. I advise you to read the React documentation

import { useState, useEffect } from "react";

function App() {
  const [text, setText] = useState("");

  useEffect(() => {
    let r_text = new Array();
    r_text[0] = '"This is a test"';
    r_text[1] = '"This is another"';
    r_text[2] = '"This is a test"';
    r_text[3] = '"This is another"';

    var i = Math.floor(r_text.length * Math.random());
    setText(r_text[i])
  },[])

  return (
    <div class="container mx-auto">
      <div class="max-w-md mx-auto bg-white text-center text-6xl m-10 overflow-hidden md:max-w-2xl">
        site title
      </div>
      <p>{text}</p>
    </div>
  );
}

export default App;

edited Oct 26, 2021 at 1:47

answered Oct 26, 2021 at 1:37

demark-pro

1745 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

reallymemorable Over a year ago

Thanks -- that worked! The last line ReactDOM.render(<App />, document.getElementById('root')); threw a ReactDOM not defined -- but I was able to remove the line and the code compiled.

demark-pro Over a year ago

yeah, this line is located in your index.js, it is needed in order to put your application in the root container in your index.html

Collectives™ on Stack Overflow

Display random text in React app with Math.random()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related