When I make a selection from the dropdown I saved the selected value to type then when I click the button I add an object to drums, I map over thee drums and based on the type I want to render the component with the same name.
Sandbox here
import React, { useState } from "react";
import uuid from "react-uuid";
import "./styles.css";
const Snare = () => {
return <div>Snare</div>;
};
const Gong = () => {
return <div>Gong</div>;
};
export default function App() {
const [drums, setDrums] = useState([]);
const [type, setType] = useState();
return (
<div className="App">
{drums.map((Drum, index) => (
<Drum.type /> // Why cant I use `.type`?
))}
<label>
Drum type to add:
<select onChange={e => setType(e.target.value)} value={type}>
<option value="">Select...</option>
<option value="Snare">Snare</option>
<option value="Gong">Gong</option>
</select>
<button
onClick={() => {
setDrums([...drums,
{
id: uuid(),
type
}
]);
}}
>
Add drum
</button>
</label>
</div>
);
}
In your case Drum.type is not a component but a string, you need to maintain a map of the string to component and then render it
const map = {
Snare: Snare,
Gong: Gong
};
export default function App() {
const [drums, setDrums] = useState([]);
const [type, setType] = useState();
return (
<div className="App">
{drums.map((Drum, index) => {
const Component = map[Drum.type];
return <Component key={index}/>;
})}
<label>
Drum type to add:
<select onChange={e => setType(e.target.value)} value={type}>
<option value="">Select...</option>
<option value="Snare">Snare</option>
<option value="Gong">Gong</option>
</select>
<button
onClick={() => {
setDrums([
...drums,
{
id: uuid(),
type
}
]);
}}
>
Add drum
</button>
</label>
</div>
);
}
Working demo
That's because the type is a string.
You could create a mapping to solve this and use React.createElement().
Something like:
const mapping = {
'Snare': Snare,
'Gong': Gong
}
{ drums.map(({ type }, index) => (
React.createElement(mapping[type], { key: index })
))
}
Related
I know, this topic has been handeled a lot, but I am still lost in my particular example. I have a react-select component, which is a part of another component, which is a part of App component.
SubjectSelect.tsx
export default function SubjectSelect({handleChange, value}) {
return (
<>
<Select
placeholder="Choose subject"
value={value} // set selected value
onChange={handleChange} // assign onChange function
/>
<div><b>Your choice: </b> {value} </div>
</>
)
}
FormStepOne.tsx
import SubjectSelect from "../components/SubjectSelect";
export const SubjectSelector = ({value, handleChange}) => {
return (
<>
<h1 className="text-3xl font-bold underline">
Hi there! Please select book subject
</h1>
<SubjectSelect value={value} onChange={handleChange}/>
</>
);
}
And App.tsx
import React, { useState } from 'react'
import { SubjectSelector } from '../formSteps/stepOne'
import { ShowcaseBooks } from '../formSteps/stepTwo'
const options = [
{ value: 'fiction', label: 'Fiction' },
{ value: 'science', label: 'Science' },
]
export default function App() {
const [books, setBooks] = useState('')
const [selectedValue, setSelectedValue] = useState('');
const handleChange = e => {
setSelectedValue(e.value);
alert('huhu')
}
const value = options.find(obj => obj.value === selectedValue)
return (
<div className="bg-blue-200">
<div className="container mx-auto py-36 bg-blue-200">
<div className="mt-12 px-96">
<SubjectSelector
options={options}
value={value}
onChange={handleChange}/>
<ShowcaseBooks books={books}/>
</div>
</div>
</div>
)
}
Somehow I am not passing the props right, so that my components showcase several errors. App.tsx complains about options and onChange, but I am lost and don't reallyfully undertand what is wrong and how to pass props corretly, so my App.js and therefore Showcase books "know" the selectdValue.
The problem is you pass the handleChange function to SubjectSelector on the onChange prop, while that component is expecting it on a prop named handleChange.
In App.tsx you need something like this
<SubjectSelector
options={options}
value={value}
handleChange={handleChange}/> // This is the fix
Because when you do this
export const SubjectSelector = ({value, handleChange}) =>
You're telling the component the name of the props to expect. You need to change your Subject selector in a similar manner.
For first loading, the prop value you send is empty (because change event is not triggered). so It will turn your app into error.
So you need to check it not empty before parse it to HTML
SubjectSelect.tsx
export default function SubjectSelect({ options, handleChange, selectedVal }) {
return (
<>
<select
value={selectedVal && selectedVal.value} // set selected value
onChange={handleChange} // assign onChange function
>
<option>Choose subject</option>
{options.map((item: any) => {
return (
<option key={item.value} value={item.value}>
{item.label}
</option>
);
})}
</select>
<div>
<b>Your choice: </b> {selectedVal && selectedVal.value}
</div>
</>
);
}
FormStepOne.tsx
import SubjectSelect from "./SubjectSelect";
const SubjectSelector = ({ selectedVal, handleChange, options }) => {
return (
<>
<h1 className="text-3xl font-bold underline">
Hi there! Please select book subject
</h1>
<SubjectSelect
options={options}
selectedVal={selectedVal}
handleChange={handleChange}
/>
</>
);
};
export default SubjectSelector;
And do not use value as variable name or prop to avoid conflict with key of object.
Getting value from change event should be e.target.value
import React, { useState } from "react";
import SubjectSelector from "./SubjectSelect";
const options = [
{ value: "fiction", label: "Fiction" },
{ value: "science", label: "Science" }
];
export default function App() {
const [selectedValue, setSelectedValue] = useState('');
const handleChange = (e: any) => {
setSelectedValue(e.target.value);
alert(e.target.value);
};
const selectVal = options.filter((obj) => obj.value === selectedValue)[0];
return (
<div className="bg-blue-200">
<div className="container mx-auto py-36 bg-blue-200">
<div className="mt-12 px-96">
<SubjectSelector
options={options}
selectedVal={selectVal}
handleChange={handleChange}
/>
</div>
</div>
</div>
);
}
You can check my complete answer here. I hope it might helps you
https://codesandbox.io/s/delicate-smoke-n0eyjc?file=/src/App.tsx:0-804
I am beginner and practicing on Library Management System in react. So I have components named BookDetails.js, BookList.js. BookDetails contains the form for entering Title and Description. So How can I pass the data entered from BookDetails to BookList and to dispaly from App.
import React, { useState } from 'react'
import BookList from './BookList'
const BookDetails = (props) => {
const [bookdetails, setbookDetails] = useState('')
const [desc, setDesc] = useState('')
const titleChangehandler = (e) => {
setbookDetails(e.target.value)
}
const descriptionChangehandler = (e) => {
setDesc(e.target.value)
}
const submitHandler = (e) => {
e.preventDefault()
return (
<div className='bookdetails'>
<form className='form_bookdetails' onSubmit={submitHandler}>
<div>
<label>Enter Title:</label>
<input type='text' value={bookdetails} onChange={titleChangehandler}></input>
</div>
<div>
<label>Enter Description:</label>
<input type='text' value={desc} onChange={descriptionChangehandler}></input>
</div>
<div>
<button type='submit'>Add Details</button>
</div>
</form>
</div>
)
}
}
export default BookDetails
BookList.js
import React from 'react'
import './BookList.css'
import BookDetails from './BookDetails'
const BookList = () => {
return (
<div className="booklist">
<header>BookList</header>
<BookDetails />
</div>
)
}
export default BookList
You need to use props. BookList state will have an update function that it will pass to the BookDetail via props. Example (CodeSandbox) with Todo with title & description.
BookDetail will invoke this method on every save which then would update the original list.
TodoList.js
export default function TodoList() {
const [todo, setTodo] = React.useState(null);
const [todoList, setTodoList] = React.useState([]);
React.useEffect(() => {
getTodos();
}, []);
function getTodos() {
console.log("===> fetch all todos!!");
fetchTodos().then((todos) => {
setTodoList(todos);
});
}
function editTodo(todo) {
console.log("===> set todo => ", todo);
setTodo(todo);
}
function handleUpdate(updatedTodo) {
// update Todo
const updatedTodos = todoList.map((el) =>
el.id === updatedTodo.id ? updatedTodo : el
);
setTodoList(updatedTodos);
setTodo(null);
}
return (
<div>
<ul>
{todoList.map((item) => (
<li key={item.id}>
{item.title}, {item.description}
<button onClick={() => editTodo(item)}>edit</button>
</li>
))}
</ul>
{todo && <TodoDetail todo={todo} updateTodo={handleUpdate} />}
</div>
);
}
TodoDetail.js
import React from "react";
export default function TodoDetail(props) {
const [todo, setTodo] = React.useState(props.todo);
console.log("todo =>", todo);
function handleChange(key, value) {
console.log("===> todo changed!");
setTodo({
...todo,
[key]: value
});
}
function handleSubmit() {
// api PUT on todo
console.log("===> todo edit submit!!");
props.updateTodo(todo);
}
return (
<div>
<form onSubmit={handleSubmit}>
<label htmlFor="title">
<input
value={todo.title}
onChange={(e) => handleChange("title", e.target.value)}
/>
<input
value={todo.description}
onChange={(e) => handleChange("description", e.target.value)}
/>
</label>
<button type="submit">submit</button>
</form>
</div>
);
}
You can store the list of books in your BookList component like
const [bookList, setBookList] = useState([])
This way your BookList component has access to the books. You can then create a function to add books to the list
function addBook(book) {
setBookList([...bookList, book])
}
Then pass the addBook() function to the BookDetails component to use it on submit.
<BookDetails addBook={addBook}
Now BookDetails can access the function as a prop
props.addBook("pass new book here")
There are 4 select Components with dependant dropdown menu.But when I select an option its not displaying in the input field although my 'selectedPlanets' state is updating just right.
Here is my code -
import React, { useState } from "react";
import "../css/Destination.css";
function Destination(props) {
const [selectedPlanets, SetselectedPlanets] = useState([
null,
null,
null,
null,
]);
const OnSelectPlanet = async (e, key) => {
const clonedSelectedPlanets = JSON.parse(JSON.stringify(selectedPlanets));
clonedSelectedPlanets[key] = e.target.value;
SetselectedPlanets(clonedSelectedPlanets);
};
const CustomSelectComponents = ({ value, options, OnSelect}) => {
return (
<select value={value} onChange={OnSelect}>
<option> -- Select a Planet -- </option>
{options.map((option) => {
return <option key = {option.name} value={option.name} >{option.name}</option>;
})}
</select>
);
};
const OptionsToRender = (Alloptions, AllselectedOptions, index) => {
console.log(AllselectedOptions);
const optionstoRender =
AllselectedOptions[index] != null
? Alloptions.filter(
(option) =>
!AllselectedOptions.some(
(selectedOption) =>
option && selectedOption && option.name === selectedOption
)
)
: Alloptions;
return optionstoRender;
};
return (
<>
<div className="Parent_Card">
{selectedPlanets.map((planet, index) => {
const options = OptionsToRender(props.planets, selectedPlanets, index);
return (
<>
{console.log(index)}
<CustomSelectComponents
value={
selectedPlanets[index] != null ? selectedPlanets[index] : ""
}
options={options}
OnSelect={(e) => OnSelectPlanet(e, index)}
key={index}
/>
</>
);
})}
</div>
</>
);
}
export default Destination;
I tried debugging it and figured that its maybe because of how and when my component is rendering.But I dont know why and hence not able to find the solution.
My expected result is when I am choosing an option it shows in the input field.
Your code could benefit from a few different approaches to building your 4 different select components:
the use of controlled components
(https://reactjs.org/docs/forms.html#controlled-components)
separating the state for each of the different selects
refactoring the <CustomSelectComponent /> to be a component that only accepts props
Here is an example of those approaches in practice that might provide some direction on getting these selects operating as expected!
import React, { useState } from 'react';
import '../css/Destination.css';
// custom select component
const CustomSelectComponent = ({ onChange, options, value }) => (
<select onChange={onChange} value={value}>
<option> -- Select a Planet -- </option>
{options.map(option => (
<option key={option.name} value={option.name}>
{option.name}
</option>
))}
</select>
);
const Destination = () => {
// mock props
const props = { planets: [{ name: 'Pluto' }, { name: 'Earth' }] };
// separated state
const [selectOneValue, setSelectOneValue] = useState('');
const [selectTwoValue, setSelectTwoValue] = useState('');
const [selectThreeValue, setSelectThreeValue] = useState('');
const [selectFourValue, setSelectFourValue] = useState('');
return (
<div className="Parent_Card">
{/* each custom select component is now controlled by it's own state */}
<CustomSelectComponent
onChange={e => setSelectOneValue(e.target.value)}
options={props.planets}
value={selectOneValue}
/>
<CustomSelectComponent
onChange={e => setSelectTwoValue(e.target.value)}
options={props.planets}
value={selectTwoValue}
/>
<CustomSelectComponent
onChange={e => setSelectThreeValue(e.target.value)}
options={props.planets}
value={selectThreeValue}
/>
<CustomSelectComponent
onChange={e => setSelectFourValue(e.target.value)}
options={props.planets}
value={selectFourValue}
/>
</div>
);
};
export default Destination;
I found this tutorial on how to create a react quizz app on youtube link to tutorial
I am trying to set the title based on the current Select Option Value when submitting the form.
Currently I managed to change the title only when a different option is selected.
import React, { useState, useEffect, useRef } from "react";
import "./App.css";
import axios from "axios";
import FlashcardList from "./components/FlashcardList";
function App() {
const [flashcards, setFlashcards] = useState([]);
const [categories, setCategories] = useState([]);
const [title, setTitle] = useState("General Knowledge");
const categoryEl = useRef();
const amountEl = useRef();
useEffect(() => {
axios.get("https://opentdb.com/api_category.php").then((res) => {
setCategories(res.data.trivia_categories);
});
}, []);
function decodeString(str) {
const textArea = document.createElement("textarea");
textArea.innerHTML = str;
return textArea.value;
}
function handleSubmit(e) {
e.preventDefault();
axios
.get("https://opentdb.com/api.php", {
params: {
amount: amountEl.current.value,
category: categoryEl.current.value,
},
})
.then((res) => {
setFlashcards(
res.data.results.map((questionItem, index) => {
const answer = decodeString(questionItem.correct_answer);
const options = [...questionItem.incorrect_answers, answer];
return {
id: `${index} - ${Date.now()}`,
question: decodeString(questionItem.question),
answer: answer,
options: options.sort(() => Math.random() - 0.5),
};
})
);
});
}
function getTitle(e) {
setTitle(e.target.options[e.target.selectedIndex].text);
}
return (
<>
<form className="header" onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="category">Category</label>
<select id="category" ref={categoryEl} onChange={getTitle}>
{categories.map((category) => {
return (
<option value={category.id} key={category.id}>
{category.name}
</option>
);
})}
</select>
</div>
<div className="form-group">
<label htmlFor="amount">Number Of Questions</label>
<input
type="number"
id="amount"
min="1"
step="1"
defaultValue={10}
ref={amountEl}
/>
</div>
<div className="form-group">
<button className="btn">Generate</button>
</div>
</form>
<div className="container">
<h1 className="title">{title}</h1>
<FlashcardList flashcards={flashcards} />
</div>
</>
);
}
export default App;
Code
Live demo
You can set the category as soon the categories are fetched. Can just use the zeroth element to set the title.
useEffect(() => { axios.get("https://opentdb.com/api_category.php").then((res) => {
setCategories(res.data.trivia_categories);
setTitle(res.data.trivia_categories[0]);
});
}, []);
I have a hook like this :
export default function AddSections ({ onCheckItem }) {
const checkItem = (item) => {
console.log('check')
}
return (
<div>
<Checkbox
className="section_item"
key={index}
id={section.name}
name="add-sections"
type="radio"
label={'section.label'}
value={'section.name'}
onChange={val => checkItem(item)}
/>
</div>
)
}
for the first time when i check the checkbox the function return the console.log, when i try to undo the check it never works
Problem is you have defined the Checkbox type to be radio and you are using the uncontrolled input so it doesn't allow your to toggle.
You have two solutions
Change the type to checkbox
sample code:
export default function AddSections ({ onCheckItem }) {
const checkItem = (item) => {
console.log('check')
}
return (
<div>
<Checkbox
className="section_item"
key={index}
id={section.name}
name="add-sections"
type="checkbox"
label={'section.label'}
value={'section.name'}
onChange={val => checkItem(item)}
/>
</div>
)
}
Use Controlled input
sample code
export default function AddSections ({ onCheckItem }) {
const [checked, setChecked] = useState('');
const checkItem = (item) => {
setChecked(checked => (checked == item? '': item));
}
return (
<div>
<Checkbox
className="section_item"
key={index}
id={section.name}
name="add-sections"
checked={checked === item}
type="radio"
label={'section.label'}
value={'section.name'}
onChange={val => checkItem(item)}
/>
</div>
)
}
I suppose that Checkbox component is gonna map the props to native checkbox element. If that is the case, you should use checked prop as well. I don't see any hooks in your code though.
import React, {useState, useEffect} from 'react'
export default function AddSections ({ onCheckItem }) {
const [checked, setChecked] = useState(false)
const handleCheckItem = (item) => {
setChecked(!checked)
}
useEffect(() => {
console.log('clicked')
}, [checked])
return (
<div>
<Checkbox
className="section_item"
key={index}
id={section.name}
name="add-sections"
type="radio"
label={'section.label'}
value={'section.name'}
checked={checked}
onChange={handleCheckItem}
/>
</div>
)
}