Я хочу рандомизировать компонент, отображаемый на странице в React JS ⇐ Html

[Anonymous]

Я хочу создать веб -страницу, которая каждый раз отображает тодолист из тех, которые у меня есть в файле todos и это случайным образом. Например, покажите Todoteen, а затем Todofive, и для каждого пользователя будет разные представления. Мой код находится на двух частях, часть первой - todo.jsx - родитель, а todoone, todotwo, todothree ... * - дочерности. В кулаке я переключился с одного компонента на другой, используя SettoDostate (""); , где строка, данная этому ESESTATE, изменит компонент.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>
и пример Childs: < /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;


Подробнее здесь: https://stackoverflow.com/questions/756 ... n-react-js