I'm trying to practice mapping array objects and i cannot for the life of me get this to display on scrimba mini-browser. I can console.log the array object but that's all. Am i overlooking anything? Thanks.
import React from 'react'
import man from './menitem.js'
class App extends React.Component{
constructor(){
super()
this.state = {Men:man}
}
render(){
const newman = this.state.Men.map(item => item={item} )
const newman1 = newman.toString(newman)
return(<div>
<p>{newman}</p>
</div>)
}
}
export default App
Screenshot of application
The function that you're passing to .map isn't getting you what you need. It should be something more like:
const newman = this.state.Men.map(item => (<p key={item}>{item}</p>));
then in your return statement:
return (
<div>
{newman}
</div>
);
Related
Hi developers I'm just a beginner in React.js. I tried to print props by passing from parent to child.
This is app.js file
import React from "react";
import Hooks from "./components/ReactHooks1";
import Hooks2 from "./components/ReactHooks2";
const App = () => {
return (
<div>
<h1>
Welcome to React App
</h1>
<Hooks2 title2={"Welcome"}/>
</div>
)
}
export default App
This is child component file
import React from 'react';
const Hooks2 = (props) => {
console.log(props);
}
export default Hooks2;
I just try to print props but it shows an empty object. what am I doing wrong please help me on this
You should return something or null to parent component from child, when you're using it in parent component. This will solve your problem
export const Hooks2 = (props) => {
console.log(props);
return <></>;
}
#Rasith
Not sure why would you want to do this, but if you're trying to pass a child component that would print something to the console. In this case you need to destructure the component's props. Here's an article about it from MDN.
This is how I would do it:
const CustomComponent = ({title}) => {
console.log(title)
}
const App = () => {
return (
<>
<h1>Hello World</h1>
<CustomComponent title={"Welcome"}/>
</>
);
};
For the title to be printed to the console, no need to add a return statement to the child component. Again, not sure why you would do this, but there you go.
Well trying to console.log title certainly would not work because what you are passing is called title2. Also your child component is not returning anything.
First, you have to return anything from your child component( even a fragment )
You can access title2 in the child component with any of these methods:
1- using props object itself
const Hooks2 = (props) => {
console.log(props.title2);
return;
}
2- you can also destructure props in place to access title2 directly
const Hooks2 = ({title2}) => {
console.log(title2);
return ;
}
You have to use destructuring in your ChildComponent, to grab your props directly by name:
const Hooks2 = ({title2}) => {
console.log(title2);
}
You can read a little bit more about it in here: https://www.amitmerchant.com/always-destructure-your-component-props-in-react/
Recently I started to learn ReactJS with help of tutorials and I've run into an error I can't find solution for by myself. One of the first projects I decided to do is To-do list and when trying to pass "handleChange" function as a prop to my component I get this error TypeError: Cannot read property 'handleChange' of undefined.
Here is my full code of App class so you can see what I'm trying to do:
import React from 'react';
import './App.css';
import Content from "./Content"
import ToDoItems from "./ToDoItems"
class App extends React.Component {
constructor() {
super()
this.state = {
items: ToDoItems
}
this.handleChange = this.handleChange.bind(this)
}
handleChange() {
console.log("Change!")
}
render() {
const items = this.state.items.map(function(item){
return (<Content key={item.id} todo={item.item} checked={item.completed} handleChange={this.handleChange}/>)
})
return (
<div>
{items}
</div>
)
}
}
export default App;
I'm getting my data from file called ToDoItems and trying to pass them as props into Content component. Everything is working fine until I try to pass the function handleChange().
I must be doing something wrong. Any help would be appreciated.
The problem is here,
const items = this.state.items.map(function(item){
return (<Content key={item.id} todo={item.item} checked={item.completed} handleChange={this.handleChange}/>)
})
When ur using non-array function it binds this and others stuff to its own protoype. Meaning ur this.handleChanges this actually refers to function, instead of class
Try using this,
const items = this.state.items.map((item) => {
// ^^^^^^^^^^^
return (<Content key={item.id} todo={item.item} checked={item.completed} handleChange={this.handleChange}/>)
})
as Arrow functions don't bind this or any other stuff. so this should now refer to the class
I am trying to understand how Props work in React. The following code is giving an error - Error: Objects are not valid as a React child (found: object with keys {args})
const App = () => {
const course = 'Half Stack application development'
return (
<div>
<Header args={course}/> // Will an object be passed or just the string?
</div>
)
}
const Header = (agrs)=>{
console.log(agrs)
return (
<div>
<h1>{agrs}</h1>
</div>
)
}
When props are being passed, is an Object is passed encapsulating the fields or just the field values are passed?
why does the above code doesn't work?
Thanks
First off, you have a spelling mistake. Replace agrs with args. Secondly, props are passed as an object (dictionary), so you have one of two options:
const Header = (props) =>{
console.log(props.args)
return (
<div>
<h1>{props.args}</h1>
</div>
)
}
or object destructuring:
const Header = ({args}) =>{
console.log(args)
return (
<div>
<h1>{args}</h1>
</div>
)
}
Also, make sure to add props validation (your linter should warn you about this):
import PropTypes from "prop-types";
Header.propTypes = {
args: PropTypes.string.isRequired
};
Answer 1: Value is passed as a key with the same name as field you assigned it to in props object.
Answer 2:
const Header = (props)=>{
console.log(props.agrs)
return (
<div>
<h1>{props.agrs}</h1>
</div>
)
}
The code above will run fine.
Alternative to answer 2:
const Header = ({agrs})=>{
console.log(agrs)
return (
<div>
<h1>{agrs}</h1>
</div>
)
}
This will also run fine.
It uses object destructuring so you don't have to use props.agrs but just args works fine.
const App = () => {
const course = 'Half Stack application development'
return (
<div>
<Header args={course}/> // Will an object be passed or just the string?
</div>
)
}
const Header = ({agrs})=>{
console.log(agrs)
return (
<div>
<h1>{agrs}</h1>
</div>
)
}
Use object Destructuring like above or
const Header = (props)=>{
console.log(props.agrs)
return (
<div>
<h1>{props.agrs}</h1>
</div>
)
}
Find more here Components and Props.
Find more about Destructuring
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProp}</h1>
<h2>{this.props.contentProp}</h2>
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
from props..."/>, document.getElementById('app'));
export default App;
enter image description here
could you please tell me why I am getting this error:
Objects are not valid as a React child (found: object with keys
{seo_val, text_val}). If you meant to render a collection of children,
use an array instead.
I am trying to hit http request and try to make dropdown .
import React from "react";
class DropDown extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
}
render() {
const makeDropDown = () => {
console.log(this.data);
return this.props.data.map(x => {
return <option>{x}</option>;
});
};
return (
<div>
<div>
<select>{makeDropDown()}</select>;
</div>
</div>
);
}
}
export default DropDown;
Sandbox.
Full error message:
Objects are not valid as a React child (found: object with keys
{seo_val, text_val}).
Error is very clear, you are trying to render an object in jsx that contains two keys:
seo_val: "..."
text_val: "..."
Write it like this, (render the value that you want):
return <option key={x.seo_val}>{x.text_val}</option>;
Working sandbox.
Looks like x is an object.
Try
import React from "react";
class DropDown extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
}
render() {
return (
<div>
<div>
<select>{
this.props.data.map(x => {
return (<option key={x}>echo</option>);
})
}</select>;
</div>
</div>
);
}
}
export default DropDown;
And you'll see it works. Replace echo with {x} throws the error you mentioned.
This is probably going to be something really simple. But I am having hard time figuring out what is wrong with how my react component is written. Here is the component code.
import React, { Component, PropTypes } from 'react';
import styles from './Menu.css';
import SubMenu from './SubMenu';
import classNames from 'classnames/bind';
let cx = classNames.bind(styles);
export default class Menu extends Component{
static propTypes ={
menuData:PropTypes.array.isRequired
};
constructor(props){
super(props);
this.state = {menuOpenedLabel:""};
};
menuClick(label){
this.state.menuOpenedLabel = label;
};
render(){
let menus = this.props.menuData.map(function(menuItem){
let handleClick = this.menuClick.bind(this,menuItem.label);
return (<li key={menuItem.label}>
<a onClick={handleClick}>{menuItem.label}</a>
<SubMenu subMenu={menuItem.submenu} isVisible={this.state.menuOpenedLabel === menuItem.label}/>
</li>);
});
return (<nav>
<ul className={styles.menu}>{(menus)}</ul>
</nav>);
}
}
This is the error that I get in chrome.
Uncaught TypeError: Cannot read property 'menuClick' of undefined
At first I thought it was because of using this inside of the map function, but apparently that this code is correct. Based on this link.
https://facebook.github.io/react/tips/expose-component-functions.html
Any thoughts?
Ok I figured it out! there is a second parameter to map(), that controls what the value of this is.
let menus = this.props.menuData.map(function(menuItem){
let handleClick = this.menuClick.bind(this,menuItem.label);
return (<li key={menuItem.label}>
<a onClick={handleClick}>{menuItem.label}</a>
<SubMenu subMenu={menuItem.submenu} isVisible={this.state.menuOpenedLabel === menuItem.label}/>
</li>);
}, this);
Your component is fine, but map stuff can be confusing to look at sometimes. I find this a useful chunk of code, maybe it will help you even though you already figured it out:) Just a way of organizing a map and you get the index, too.
render() {
const { stuffs } = this.state;
return (
<div>
{stuffs.map((stuff, i) => {
return(
<Components key={i} funStuff={stuff.fun} />
);
})}
</div>
)
}