I am taking a React course and we are asked to pass a single JavaScript object as props to a React app. Below is my code:
import React from 'react';
import ReactDOM from 'react-dom';
const App = ( ) => {
const course = {
name: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10
},
{
name: 'Using props to pass data',
exercises: 7
},
{
name: 'State of a component',
exercises: 14
}
]
}
const Header = ( ) => {
return (
<div>
<h1>{course.name}</h1>
</div>
)
}
const Content = ( ) => {
return (
<div>
<Part name={course.parts} exercises={course.parts} />
<Part name={course.parts} exercises={course.parts} />
<Part name={course.parts} exercises={course.parts} />
</div>
)
}
const Part = ( ) => {
return (
<div>
<p>{course.parts} {course.parts}</p>
</div>
)
}
const Total = () => {
return (
<div>
<p>Number of exercises {course.parts + course.parts + course.parts}</p>
</div>
)
}
return (
<div>
<Header course={{course}} />
<Content course={course} />
<Total course={course} />
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'));
It is returning an error --> Objects are not valid as a React child.
I couldn't use this with the arrow function. I tried props but couldn't fix it. Please can someone help me to refactor and fix my code.
Here is a code that should work as desired: Code. Your course.parts is an array and that is one of the reasons why some errors occured. However, there were some more problems related to props and I would suggest reading React documentation.
You can also avoid hard-coded values in Content component by using map() function:
const Content = () => {
return (
<div>
{course.parts.map(singlePart => {
return <Part singlePart={singlePart} />;
})}
</div>
);
};
Many useful array functions are described here.
Try to use Props this way:
const App = ( ) => {
const course = {
name: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10
},
{
name: 'Using props to pass data',
exercises: 7
},
{
name: 'State of a component',
exercises: 14
}
]
}
const Header = ({course}) => {
return (
<div>
<h1>{course.name}</h1>
</div>
)
}
const Content = ({course}) => {
//use parts.map(el => <Part part={el}) instead
return (
<div>
<Part part={course.parts[0]} />
<Part part={course.parts[1]}/>
</div>
)
}
const Part = ({part}) => {
return (
<div>
<p>{part.name} {part.exercises}</p>
</div>
)
}
const Total = ({course}) => {
// dont forget to refactor counting exercises with reduce function or something prettier
return (
<div>
<p>Number of exercises {course.parts[0].exercises + course.parts[1].exercises + course.parts[2].exercises}</p>
</div>
)
}
return (
<div>
<Header course={course} />
<Content course={course} />
<Total course={course} />
</div>
)
}
Also, you could have problem with
<Header course={{course}} />
because you pass Object {course: {name: '...', parts: [...]}} as props, not {name: '..', parts: [..]}
Finally, you can move out your Header, Content, Total components from App component.
Related
I'm passing an array of objects to a child as props, and I wanted the child component to re-render when the aray changes, but it doesn't:
parent:
export default function App() {
const [items, setItems] = useState([]);
const buttonCallback = () => {
setItems([...items, { text: "new item" }]);
};
return (
<div className="App">
<h1>Items list should update when I add item</h1>
<button onClick={buttonCallback}>Add Item</button>
<Items />
</div>
);
}
child:
const Items = ({ itemlist = [] }) => {
useEffect(() => {
console.log("Items changed!"); // This gets called, so the props is changing
}, [itemlist]);
return (
<div className="items-column">
{itemlist?.length
? itemlist.map((item, i) => <Item key={i} text={item.text + i} />)
: "No items"}
<br />
{`Itemlist size: ${itemlist.length}`}
</div>
);
};
I found this question with the same issue, but it's for class components, so the solution doesn't apply to my case.
Sandbox demo
<Items propsname={data} />
const buttonCallback = () => {
setItems([...items, { text: "new item" }]);
};
but you should put it as:
const buttonCallback = () => {
setItems([...items, { text: "new item", id: Date.now() }]);
};
Because is not recommended to use index as a key for react children. Instead, you can use the actual date with that function. That is the key for React to know the children has changed.
itemlist.map((item) => <Item key={item.id} text={item.text} />)
Try below:
you are adding array as a dependency, to recognise change in variable, you should do deep copy or any other thing which will tell that useEffect obj is really different.
`
const Items = ({ itemlist = [] }) => {
const [someState,someState]=useState(itemlist);
useEffect(() => {
someState(itemlist)
}, [JSON.stringify(itemlist)]);
return (
<div className="items-column">
{someState?.length
? someState.map((item, i) => <Item key={i} text={item.text
+ i}
/>)
: "No items"}
<br />
{`Itemlist size: ${someState.length}`}
</div>
);
};
I have two components.
First is called: BucketTabs
Second is called:BucketForms
To have a better idea. Below pictures illustrate it.
When I switching tab, different form will be showed below.
Q: Whenever I switch from one tab to other tab, and then switch back, the content in the previous BucketForms will be gone. But, gone data are supposed to be stored into a state of that BucketForms.
In fact, I've memo the BucketForms already, so I've expected the content(data) would not be gone.
What's the problem and how could I prevent the data to be gone after switching tab.
My BucketTabs:
import { BucketForms } from '~components/BucketForms/BuckForms'
export const BucketTabs: React.FC = () => {
const items = useMemo<ContentTabsItem[]>((): ContentTabsItem[] => {
return [
{
title: '1',
renderContent: () => <BucketForms key="1" bucketCategory="1" />,
},
{
title: '2',
renderContent: () => <BucketForms key="2" bucketCategory="2" />,
},
]
}, [])
return (
<div className="row">
<div className="col">
<ContentTabs items={tabs} kind="tabs" />
</div>
</div>
)
}
BucketForms
function PropsAreEqual(prev, next) {
const result = prev.bucketCategory === next.bucketCategory;
return result;
}
interface IData {
portfolioValue?: number
}
export const BucketForms: React.FC<IProps> = React.memo(props => {
const { bucketCategory } = props
const [data, setData] = useState<IData>({
})
const view = ({
portfolioValue,
}: IData) => {
return (
<>
<div className="row portfolio">
<FormNumericInput
key="input-portfolio-value"
name="portfolioValue"
required
value={portfolioValue}
/>
</div>
</>
)
}
return (
<Form
onChange={e => {
setData({ ...data, ...e, })
}}
>
{view(data)}
</Form>
)
}, PropsAreEqual)
I have three componente
ComponentFather ( grand Parent component )
ComponentChild ( Child component of ComponentFather)
ComponentChildChild ( Child component of ComponentChildChild)
The three components are connected so that each component is this child above.
I props data from ComponentFather to ComponentChildChild. And that work. But when I try to pring all data no work. Print only first data Chek code ->
export const ComponentFather = () => {
// this is only mockup data for example
let data = [
{
id: 2000004,
name: 'test123.pdf',
},
{
id: 2000005,
name: 'test123123.pdf',
},
];
return (
<ComponentChild data={data}>
</ComponentChild>
);
};
export const ComponentChild = ({data}) => {
// console.log(data); i got all data.
return (
{data.map((singleData) => {
<ComponentChildChild data={data}>
</ComponentChildChild>
})}
);
};
export const ComponentChildChild = ({data}) => {
return (
<div> { data.name } </div>
<div> { data.id } </div>
);
};
Code above no work......
Why?
What i am try also to set data.map inside ComponentChildChild component
export const ComponentChildChild = ({data}) => {
return (
{ data.map((singleData) => {
<div> { data.name } </div>
<div> { data.id } </div>
})}
);
};
Also no work. Work only when I hardcode example data[0].name
export const ComponentChildChild = ({data}) => {
return (
<div> { data[0].name } </div>
<div> { data[0].id } </div>
);
};
But sometimes i will have 10 items... I need to print each
pass singleData instead data
export const ComponentChild = ({data}) => {
return (
{data.map((singleData) => {
<ComponentChildChild data={singleData}>
</ComponentChildChild>
})}
);
};
I am creating a flashcard app in React using hooks and having trouble deleting a deck of flashcards. I am able to render Bootstrap cards on the page with the flashcards name, description, card count, and the buttons as desired. However, I am unable to delete a deck of cards as I'm being told setFlashcards is not a function. Here is my code:
App.js
function Layout() {
const [flashcards, setFlashcards] = useState([])
useEffect(() => {
axios
.get('http://localhost:5000/decks?_embed=cards')
.then(res => {
setFlashcards(res.data.map((questionItem, index) => {
return {
id: `${index}-${Date.now()}`,
name: questionItem.name,
description: questionItem.description,
cards: questionItem.cards.length,
}
}))
})
}, [])
return (
<div>
<Header />
<ShowAllDecks flashcards={flashcards} setFlashcards={setFlashcards} />
<NotFound />
</div>
)
}
ShowAllDecks.js
function ShowAllDecks({ flashcards, setFlashcards }) {
return (
<div className='container'>
<button>Create New</button>
{flashcards.map((flashcard) => {
return <Deck flashcards={flashcards} flashcard={flashcard} key={flashcard.id} />
})}
</div>
)
}
Deck.js
function Deck({ flashcard, flashcards, setFlashcards }) {
const deleteHandler = () => {
setFlashcards(flashcards.filter(el => el.id !== flashcard.id))
}
return (
<div className='container'>
<div className='card'>
<div className='card-body'>
<h3 className='card-title'>{flashcard.name}</h3>
<p className='card-text'>{flashcard.description}</p>
<p className='card-text'>{flashcard.cards} cards</p>
<button>View</button>
<button>Study</button>
<button onClick={deleteHandler}>Delete</button>
</div>
</div>
</div>
)
}
Example of a deck with one card:
[
{
'id': 1,
'name': 'A Deck Name'
'description': 'A Deck Description',
'cards': [
{
'id': 1,
'front': 'Front of card',
'back': 'Back of card',
'deckId': 1
}
]
}
]
I'm assuming you're running call to get the flashcards in App.js because you're going to want to pass it to other components? Might be best to use Context too if you're going to drill the props down to other components a lot. Otherwise if it's only going to be for showing All decks then you can run the fetch inside the AllDecks component. Anyway I've changed your code below keeping it in App.js:
App.js
function Layout() {
const [flashcards, setFlashcards] = useState([])
const deleteHandler = (id) => {
setFlashcards(flashcards.filter(deck => deck.id !== id));
}
useEffect(() => {
axios
.get('http://localhost:5000/decks?_embed=cards')
.then(res => {
setFlashcards(res.data.map((questionItem, index) => {
return {
id: `${index}-${Date.now()}`,
name: questionItem.name,
description: questionItem.description,
cards: questionItem.cards.length,
}
}))
})
}, [])
return (
<div>
<Header />
<ShowAllDecks flashcards={flashcards} deleteHandler={deleteHandler} />
<NotFound />
</div>
)
}
ShowAllDecks.js
function ShowAllDecks({ flashcards, deleteHandler }) {
return (
<div className='container'>
<button>Create New</button>
{flashcards.map((flashcard) => {
return <Deck flashcard={flashcard} key={flashcard.id} deleteHandler={deleteHandler} />
})}
</div>
)
}
Deck.js
function Deck({ flashcard, deleteHandler }) {
return (
<div className='container'>
<div className='card'>
<div className='card-body'>
<h3 className='card-title'>{flashcard.name}</h3>
<p className='card-text'>{flashcard.description}</p>
<p className='card-text'>{flashcard.cards} cards</p>
<button>View</button>
<button>Study</button>
{/*
** this will now run the deleteHandler in the App component and pass
** the id of the current deck to it. It will then run the state hook
** and set the new flashcards without this deck
*/}
<button onClick={() => deleteHandler(flashcard.id)}>Delete</button>
</div>
</div>
</div>
)
}
I'm mapping over each object inside the array of objects inside my state's item property. The issue is, I want to be able to attach a button to each returned item that only works with that item, and not the other items too. Here's what I have so far:
class App extends React.Component {
state = {
item: [],
}
componentDidMount() {
this.setState({
item: [
{
name: 'jacob',
hair: 'brown',
sex: 'male',
}, {
name: 'hannah',
hair: 'brown',
sex: 'female',
}
]
})
}
handleChange = (e) => {
console.log(e.target.value)
var x = Object.assign({}, this.state)
}
render() {
return(
<div>
{ this.state.item.length > 0 ?
(
<div className="row mt-5">
<Item item={ this.state.item } handleChange={ this.handleChange } />
</div>
) : null
}
</div>
)
}
}
class Item extends React.Component {
render() {
return(
<div className="col">
{ this.props.item.map(s => (
<div>
<div className="mt-5">{ s.name }</div>
<button onClick={ this.props.handleChange } value={ s.name }>Click</button>
</div>
))}
</div>
)
}
}
So for instance, if the button's fx was to change the name property of the item it was rendered with, I want it to only change that item and no other items should be affected. Whenever I iterate through it attaches the button's fx to every item, so if I click it for one, I'm really clicking it for all of them, and that's exactly what I don't want.
For those curious, I'm setting the state in componentDidMount to simulate calling an API.
Also, the fx that's currently running in the handleChange is just some messing around I was doing trying to figure out values and a solution to manipulating a nested object inside an array.
Try this refactored code on CodeSandBox,
You have to add keys when iterating Components in React, i've added it, also the Item Component could be function Component since it doesn't handle a state.
Updated: below is the code in case it wouldn't be available on codesandbox.
import React from 'react';
import { render } from 'react-dom';
class App extends React.Component {
state = {
items: [],
}
componentDidMount() {
this.setState({
items: [
{
name: 'jacob',
hair: 'brown',
sex: 'male',
}, {
name: 'hannah',
hair: 'brown',
sex: 'female',
}
]
})
}
handleChange = (e) => {
console.log(e.target.value)
}
render() {
const { items } = this.state;
return (
<div>
{items.length && (
items.map((item, index) => (
<div className="row mt-5" key={index}>
<Item item={item} handleChange={this.handleChange} />
</div>
))
)
}
</div>
)
}
}
const Item = ({ item, handleChange }) => (
<div className="col">
<div className="mt-5">{item.name}</div>
<button onClick={handleChange} value={item.name}>Click</button>
</div>
);
render(<App />, document.getElementById('root'));
I think you want to pass the individual element in to your handleChange:
{ this.props.item.map((s, i) => {
<div>
<div className="mt-5">{ s.name }</div>
<button key={i} onClick={ (s) => this.props.handleChange(s) } value={ s.name }>Click</button>
</div>
})}
This way, you will have the individual item passed in as an argument, so when you are writing your handleChange, you can do whatever you want with just that item and not the whole array.