How to send props and methods between components? - reactjs

Question

Hi guys, I'm trying to code little app. I am trainee programmer. I need help to understand how to use props on my app. I'm currently using one component from CodePen and I fetched the data from jsonplaceholder. But I don't know how to pass props between this component and App.js. It was no problem with easier components but here is lot of methods and events. With this tagged input I want to add or delete items.
import React from "react";
import StateFullComponent from "./components/StateFullComponent";
import StatelessComponent from "./components/StatelessComponent";
import TagInput from "./components/TagInput";
function App() {
return (
<div>
<StatelessComponent
props1={"String"}
props2={1}
props3={true}
props4={JSON.stringify({ value: "value", key: 1 })}
/>
<StateFullComponent items={["apple", "orrange", "pear", "male"]} />
<TagInput />
</div>
);
}
export default App;
import React, { Component } from "react";
export default class TagInput extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
focused: false,
input: ""
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
this.handleRemoveItem = this.handleRemoveItem.bind(this);
}
componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => {
return response.json();
})
.then(result => {
this.setState({
users: result
});
});
}
add() {
let value = Math.floor(Math.random() * 10 + 1);
let users = this.state.users;
users.push(value);
this.setState({ users: users });
}
handleInputChange(evt) {
this.setState({ input: evt.target.value });
}
handleInputKeyDown(evt) {
if (evt.keyCode === 13) {
const { value } = evt.target;
this.setState(state => ({
users: [...state.users, value],
input: ""
}));
}
if (
this.state.users.length &&
evt.keyCode === 8 &&
!this.state.input.length
) {
this.setState(state => ({
users: state.users.slice(0, state.users.length - 1)
}));
}
}
handleRemoveItem(index) {
return () => {
this.setState(state => ({
users: state.users.filter((user, i) => i !== index)
}));
};
}
render() {
console.log(this.props, ":::::::::::");
const { users } = this.state;
const userId = users.map((user, id) => <li key={id}>{user.name}</li>);
const styles = {
container: {
border: "1px solid #ddd",
padding: "5px",
borderRadius: "5px"
},
items: {
display: "inline-block",
padding: "2px",
border: "1px solid blue",
fontFamily: "Helvetica, sans-serif",
borderRadius: "5px",
marginRight: "5px",
cursor: "pointer"
},
input: {
outline: "none",
border: "none",
fontSize: "14px",
fontFamily: "Helvetica, sans-serif"
}
};
return (
/* <div>
<ul>{userId}</ul>
<button onClick={this.handleRemoveItem().bind(this)}>add</button>
</div> */
<label>
<ul style={styles.container}>
{this.state.users.map((user, i) => (
<li
key={i}
style={styles.users}
onClick={this.handleRemoveItem(i).bind(this)}
>
{user}
<span>(x)</span>
</li>
))}
<input
style={styles.input}
value={this.state.input}
onChange={this.handleInputChange.bind(this)}
onKeyDown={this.handleInputKeyDown.bind(this)}
/>
</ul>
</label>
);
}
}

Answer 1

In your componentDidMount you are fetching data, and getting back an array of objects, and setting the state value users to the array of objects. That's all good and exactly what you should be doing.
The problem is in the render method when you are looping through the array of users. Remember that each user in the array is an object. Look at the jsx you have within the li element. You are rendering the user object, and an object is an invalid react child. Instead, you need to render the particular fields from the object.
Example, if the object contains a name field, and an email field, render {user.name} or {user.email}. That way you can render the particular fields of data from the user object.
<li
key={i}
style={styles.users}
onClick={this.handleRemoveItem(i).bind(this)}
>
Name: {user.name}
Email: {user.email}
Id: {user.id}
<span>(x)</span>
</li>
It seems you may still have some questions about passing props to a component. This only addresses the particular error you are seeing. If you still have questions let me know.