Ich möchte die auf einer Seite in React JS angezeigte Komponente randomisieren ⇐ HTML

[Anonymous]

Ich möchte eine Webseite erstellen, die jedes Mal, wenn ein Todolist von denen angezeigt wird, von denen ich in Datei todos habe, und das mit zufälliger Weise. Zeigen Sie beispielsweise den TodoTeen und für jeden Benutzer eine andere Ansicht. Mein Code ist auf zwei Teilen, Teil 1 ist todo.jsx ist das Elternteil und Todoone, Todotwo, Todothree ... * sind die Kindes. Bei der Faust habe ich den Schalter von einer Komponente zur anderen mit settodostate ("");

Code: Select all

import TodoEight from "./Todos/TodoEight";
import TodoSeven from "./Todos/TodoSeven";
import TodoSix from "./Todos/TodoSix";
import TodoFive from "./Todos/TodoFive";
import TodoNine from "./Todos/TodoNine";
import TodoTen from "./Todos/TodoTen";
import { SurveyContext } from "../Helpers/Contexts.js";

import { generateStringPair, generateParagraphPair } from "../stringManager.js";
import TodoEleven from "./Todos/TodoEleven";
import TodoTwelve from "./Todos/TodoTwelve";
import TodoThirteen from "./Todos/TodoThirteen";

function Todos() {
const type1 = "sidebyside";
const type2 = "topofeachother";

const {  userId } = useContext(SurveyContext);

const [TodoState, setTodoState] = useState("1");

// the usestate for progressbar
const [currentTodoState, setcurrentTodoState] = useState(1);

//Total Todos
const totalTodos = 15;

const state = {
TodoState,
setTodoState,
currentTodoState,
setcurrentTodoState,
totalTodos,
};

//generate Todos text randomly

const [text1_1, text2_1] = generateStringPair(5, "randomChange");
const [text1_2, text2_2] = generateStringPair(15, "match");
const [text1_3, text2_3] = generateStringPair(5, "hardChange");
const [text1_4, text2_4] = generateStringPair(10, "match");
const [text1_5, text2_5] = generateStringPair(15, "randomChange");
const [text1_6, text2_6] = generateStringPair(15, "hardChange");

const [text1_7, text2_7] = generateStringPair(5, "randomChange");
const [text1_8, text2_8] = generateStringPair(15, "match");
const [text1_9, text2_9] = generateStringPair(5, "hardChange");
const [text1_10, text2_10] = generateStringPair(10, "match"); //// !!!!!
const [text1_11, text2_11] = generateStringPair(15, "randomChange");
const [text1_12, text2_12] = generateStringPair(15, "hardChange");

const [text1_13, text2_13] = generateParagraphPair("simplerror");
const [text1_14, text2_14] = generateParagraphPair("simplerror");
const [text1_15, text2_15] = generateParagraphPair("harderror");

const [items, setItems] = useState([
{
userId: userId,
TodoId: 1,
text1: text1_1,
text2: text2_1,
},
{
userId: userId,
TodoId: 2,
text1: text1_2,
text2: text2_2,
},
{
userId: userId,
TodoId: 3,
text1: text1_3,
text2: text2_3,
},
{
userId: userId,
TodoId: 4,
text1: text1_4,
text2: text2_4,
},
{
userId: userId,
TodoId: 5,
text1: text1_5,
text2: text2_5,
},
{
userId: userId,
TodoId: 6,
text1: text1_6,
text2: text2_6,
},
{
userId: userId,
TodoId: 7,
text1: text1_7,
text2: text2_7,
},
{
userId: userId,
TodoId: 8,
text1: text1_8,
text2: text2_8,
},
{
userId: userId,
TodoId: 9,
text1: text1_9,
text2: text2_9,
},
{
userId: userId,
TodoId: 10,
text1: text1_10,
text2: text2_10,
},
{
userId: userId,
TodoId: 11,
text1: text1_11,
text2: text2_11,
},
{
userId: userId,
TodoId: 12,
text1: text1_12,
text2: text2_12,
},
{
userId: userId,
TodoId: 13,
text1: text1_13,
text2: text2_13,
},
{
userId: userId,
TodoId: 14,
text1: text1_14,
text2: text2_14,
},
{
userId: userId,
TodoId: 15,
text1: text1_15,
text2: text2_15,
},
]);

return (


{TodoState === "1" &&  (

)}
{TodoState === "2" && (

)}
{TodoState === "3" && (

)}
{TodoState === "4" && (

)}

{/* top of each other */}
{TodoState === "5" && (

)}
{TodoState === "6" && (

)}
{TodoState === "7" && (

)}
{TodoState === "8" && (

)}
{/* /Red_blue */}

{TodoState === "9" && (

)}

{TodoState === "10" && (

)}
{TodoState === "11" && (

)}

{TodoState === "12" && (

)}

{TodoState === "13" && (

)}
)}
< /code>
und ein Beispiel für Kinder lautet: < /p>

import { TodoContext } from "../../Helpers/TodosContext";
import ProgressBar from "../ProgressBar";

import "./Todos.css";

const TodoOne = (props) => {
const {
TodoState,
setTodoState,
currentTodoState,
setcurrentTodoState,
totalTodos,
} = useContext(TodoContext);

return (





props.text1
props.text2


 {
setTodoState("2");
setcurrentTodoState(currentTodoState + 1);
}}
>
Next



);
};
export default TodoOne;