We Keep Coding

Passing onChange event from mapped child to parent's state returns 'undefined' error

Hello [from react beginner].
Trying to pass child's input value to parent state.
So, App has an array:
export default class App extends React.Component {
state = {
data: [
{id: 1, name: 'john'},
{id: 2, name: 'doe'},
]
}
render() {
return (
<List data={this.state.data}/>
)
}
}
Then List takes prop.data as state.data and returns children in map:
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
this.parentChange = this.parentChange.bind(this);
}
renderList() {
const data = this.state.data;
let list = null;
if (data.length) {
list = data.map(function(item, index){
return (<Item key={item.id} data={item} onChange={(e, index) => this.parentChange(e, index)} />)
});
} else {
list = <p>nothing here</p>
}
return list;
}
parentChange(value, index) {
// pls give me anything
console.log('--- value: ', value);
console.log('--- index: ', index);
}
render() {
return (
<div>{this.renderList()}</div>
)
}
}
And Item child:
class Item extends React.Component {
render() {
const {id, name} = this.props.data;
return (
<div>
<input id={id} value={name} onChange={(e) => this.props.onChange(e, id)} />
</div>
)
}
}
But if I change any input's value there is an error as result
Cannot read property 'parentChange' of undefined
Thanks for any help (code, links etc)

You are declaring a function with function keyword:
if (data.length) {
list = data.map(function(item, index){
return (<Item key={item.id} data={item} onChange={(e, index) =>
this.parentChange(e, index)} />)
});
}
Declaring a function with the function keyword will create another context inside itself, so your this (context) will no longer be the class context.
The IDE might not warn you but when it runs, JS create another context inside your function result in an undefined error.
So it will need to change to:
if (data.length) {
list = data.map((item, index) => {
return (<Item key={item.id} data={item} onChange={(e, index) =>
this.parentChange(e, index)} />)
});
}

How get a value in a select before select one?

I have a problem with my DropDown list with react, i want pre select a value in the list but i dont know how i can do it.
For exemple: before i select a value in the list, i want when get one before i select a value, for exemple the first element i get in my database.
class App :
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
station: [],
stationValue: ''
}
}
getParking = async () => {
try {
const reponse = await axios.get(URL + "station/");
this.setState({
station: reponse.data['hydra:member']
});
} catch (e) {
console.log(e)
}
};
getData = async () => {
try {
const response = await axios.get(URL + "events?station=" + this.state.stationValue);
this.setState({
data: response.data["hydra:member"]
});
} catch (error) {
console.log(error)
}
};
componentDidMount() {
this.getData();
this.getParking()
setInterval(this.appendData, 1000)
}
setStation=(stationValue)=>{
this.setState({stationValue:stationValue})
}
render() {
const {data, station} = this.state;
return (
<div>
<header>
<Dropdown dataStation={station} setStation={this.setStation} value={this.handleChange}/>
</header>
{
data.map((item, key) =>
<div key={key}>
<>
{item.label}
</>
</div>
)
}
</div>
)
}
}
composent DropDown :
const Dropdown = ({dataStation, setParking, value}) => {
const [showMenu, setShowMenu] = useState(false);
const [selectItem, setSelectItem] = useState(showMenu);
const showList = () => {
setShowMenu(!showMenu)
};
const toggleSelected = (list) => {
setSelectItem(list.name);
setShowMenu(false)
};
return (
<>
<div className="dropdown-list-style" onClick={showList}>
<div style={{display: 'inline'}}>
{showMenu
? (<div style={{textAlign: 'right'}}><ChevronUp/></div>)
: (<div style={{textAlign: 'right'}}><ChevronDown/></div>)
}
{selectItem}
</div>
</div>
<div className="dropdown-list-style" style={{display: showMenu ? 'block' : 'none'}}>
{
dataStation.map((list, index) =>
<div key={index} onClick={() => toggleSelected(list); props.setStation(list)}}>
{list.name}
</div>
)
}
</div>
</>
)};
i tried something like
dataStation[0].name
but its not good, someone can help me please?

You can use useEffect hook. When the get request for the stations finishes and props change, it will select the first element from the array as the default value.
useEffect(() => {
if (Array.isArray(dataStation) && dataStation[0]) {
selectItem(dataStation[0].name);
}
}, [dataStation]);

ReactJS: Adding multiple input fields of different types on click

I've created a React app for a school project that can add multiple types of input fields to a view by clicking a button (sort of like Wordpress Gutenberg).
Currently, I can add one of each type of item onto the view. However, if I click the button again, it erases the current text that was added. I'd like the ability to click the button to add as many fields as I'd like on click.
Also, the items are only added into the view in the order they were created meaning, even if I choose photo first and I click headline after, it (headline) will appear at the top of the list above the initial item.
I've had a look at these solutions (which were pretty good) but they didn't provide what I need.
Dynamically adding Input form field issue reactjs
and "update delete list elements using unique key": https://www.youtube.com/watch?v=tJYBMSuOX3s
which was closer to what I needed to do.
Apologies in advance for the length of the code,(there are two other related components for text input and an editform). I'm sure there is a much more simple way to do this. I haven't been able to find an npm package or solution to this specific problem online and am open to a simpler solution.
Edit.jsx
export default class Edit extends React.Component {
state = {
texts: {
hl: '',
shl: '',
txt: '',
photo: []
},
coms: {
hl: false,
shl: false,
txt: false,
photo: null
},
labels: {
// Replace with icons
hl: 'Headline',
shl: 'Sub',
txt: 'Text Area',
photo: 'Photo'
},
selectedItem: '',
}
componentDidMount() {
const saveData = localStorage.getItem('saveData') === 'true';
const user = saveData ? localStorage.getItem('user') : '';
this.setState({ user, saveData });
}
createPage = async () => {
await this.props.postPage(this.state.texts)
}
// add options
addOptions = (item) => {
const { coms } = this.state
coms[item] = !coms[item]
this.setState({ coms: coms })
}
// ADD TEXT
addTxt = () => {
this.setState({ texts: [...this.state.texts, ""] })
}
enableAllButtons = () => {
this.setState({ selectedItem: '' })
}
handleChange = (e, index) => {
this.state.texts[index] = e.target.value
//set the changed state.
this.setState({ texts: this.state.texts })
}
setDisable = (selectedItem) => {
this.setState({ selectedItem })
}
handleRemove = () => {
// this.state.texts.splice(index, 1)
this.setState({ texts: this.state.texts })
}
handleSubmit = (e) => {
console.log(this.state, 'all text')
}
handleChange = (e, item) => {
let { texts } = this.state
texts[item] = e.target.value
//set the changed state.
this.setState({ texts })
console.log(texts)
}
render() {
const { coms, labels, selectedItem, texts } = this.state
let buttons = Object.keys(coms)
let showItems = Object.keys(coms).filter(key => coms[key] === true)
return (
<div>
<InnerHeader />
{/* Make a route for edit here */}
<Route path='/edit/form' render={() => (
<EditForm
texts={texts}
coms={coms}
labels={labels}
addOptions={this.addOptions}
setDisable={this.setDisable}
selectedItem={selectedItem}
showItems={showItems}
handleChange={this.handleChange}
enableAllButtons={this.enableAllButtons}
/>
)} />
{/* Make route for preview */}
<Route path='/edit/preview' render={(props) => (
<Preview
{...props}
createPage={this.createPage}
/>
)}
/>
</div>
)
}
}
AddText.jsx:
export default class AddText extends Component {
state = {
}
// ADD TEXT
addTxt(item) {
const {
addOptions } = this.props
addOptions(item)
}
render() {
const { coms, labels } = this.props
const { selectedItem } = this.props
let buttons = Object.keys(coms)
console.log('here', selectedItem)
return (
<div>
<Card>
<Card.Body>
{
buttons.map((item, index) => <button
value={(selectedItem === "") ? false : (selectedItem === item) ? false : true} key={index} onClick={() => this.addTxt(item)}>
{labels[item]}
</button>
)
}
</Card.Body>
</Card>
</div>
)
}
}
EditForm.jsx
export default function EditForm(props) {
return (
<div>
<div className='some-page-wrapper-sm'>
<div className="dash-card-sm">
<button><Link to={{
pathname: '/edit/preview',
item: props.texts
}}>preview</Link></button>
<br />
<br />
<AddText
coms={props.coms}
labels={props.labels}
addOptions={props.addOptions}
setDisable={props.setDisable}
selectedItem={props.selectedItem}
/>
<div>
{
props.showItems.map((item, index) => {
return (
<InputFieldComponent
// setDisable={props.setDisable}
onChangeText={(e) => props.handleChange(e, item)}
enableAllButtons={props.enableAllButtons}
key={index}
item={item}
labels={props.labels}
texts={props.texts}
/>
)
})
}
</div>
</div>
</div>
</div>
)
}
InputFieldComponent.jsx
export default class InputFieldComponent extends React.Component {
setWrapperRef = (node) => {
this.wrapperRef = node;
}
render() {
const { labels, item, onChangeText, texts } = this.props
return (
<div>
<textarea
className="txt-box"
ref={this.setWrapperRef}
onChange={onChangeText}
placeholder={labels[item]}
value={texts[item]} />
</div>
)
}
}

Can't render parent props

I'm making a React app using openweathermap API. Right now I receive the list of weather data. I'm trying to highlight the weather if I click it.
To make this happen, I wrote on App.js to pass a prop to WeatherDetail.js, but so far seems like WeatherDetail.js doesn't recognize props from its parent.
class App extends React.Component {
constructor(props) {
super(props);
}
state = { forecasts: [], selectedWeather: null }
getWeather = async city => {
const response = await weather.get('/forecast', {
params: {
q: city
}
});
this.setState ({
forecasts: response.data.list,
city: response.data.city.name,
selectedWeather: response.data.list[0]
})
}
}
onWeatherSelectFunction = (item) => {
this.setState({ selectedWeather: item });
};
render() {
return (
<div>
<Form loadWeather={this.getWeather} />
<WeatherDetail itemToChild={this.state.selectedWeather} />
<WeatherList
onWeatherSelect={this.onWeatherSelectFunction}
weathers={this.state.forecasts}
city={this.state.city}
/>
</div>
);
}
}
export default App;
const WeatherDetail = ({forecasts, itemToChild}, props) => {
const weather = props.itemToChild;
if(!weather) {
return <div>Loading...</div>;
}
return <div>{weather.humidity}</div> <-- This doesn't appear on screen
);
}
const WeatherItem = ({item, onWeatherSelectFromList, humidity, city, temp }) => {
return (
<div>
<div onClick={() => onWeatherSelectFromList(item)} >
{city}<br /> <-- Appears on screen
{humidity}<br /> <-- Appears on screen
</div>
</div>
);
};
const WeatherList = ({weathers, onWeatherSelect, city}) => {
const renderedList = weathers.map((item) => {
return (
<div>
<WeatherItem
city={city}
temp={item.main.temp}
humidity={item.main.humidity}
temperature={item.weather.icon}
onWeatherSelectFromList={onWeatherSelect}
/>
</div>
);
});
return (
<div className="flex">
{renderedList}
</div>
);
}
class Form extends React.Component {
state = { term: '' };
onFormSubmit = (event) => {
event.preventDefault();
this.props.loadWeather(this.state.term);
}
render() {
return (
<div>
<form onSubmit={this.onFormSubmit}>
<input
ref="textInput"
type="text"
value={this.state.term}
onChange={event => this.setState({term: event.target.value})}
/>
<button>Get Weather</button>
</form>
</div>
);
}
}
How do I connect App.js and WeatherDetail.js using props?

In your App.js file you are passing only one props called itemToChild
<WeatherDetail itemToChild={this.state.selectedWeather} />
In your WeatherDetail file from where you're getting forecasts? do you get forecasts from redux store?
const WeatherDetail = ({forecasts, itemToChild}, props) => {
const weather = props.itemToChild;
if(!weather) {
return <div>Loading...</div>;
}
return <div>{weather.humidity}</div> <-- This doesn't appear on screen
);
}
change your code with this.
const WeatherDetail = (props) => {
console.log("props.itemToChild", props.itemToChild) // check this console that do you get data as you want.
const weather = props.itemToChild;
if(!weather) {
return <div>Loading...</div>;
}
return <div>{weather.humidity}</div> <-- This doesn't appear on screen
);
}

You have already destructured the props so there is no need to mention props in WeatherDetail component
and also there is an extra parenthesis after the return statement you should remove that also...
Old:
const WeatherDetail = ({forecasts, itemToChild}, props) => {
const weather = props.itemToChild;
if(!weather) {
return <div>Loading...</div>;
}
return <div>{weather.humidity}</div> <-- This doesn't appear on screen
);
}
New:
const WeatherDetail = ({ forecasts, itemToChild }) => {
const weather = itemToChild;
if (!weather) {
return <div>Loading...</div>;
}
return <div>{weather.humidity}</div>;
};

Passing object of select back to parent in React dropdown

I'm having a couple of questions with my React dropdown component. Basically, I want to get the selected object from the dropdown back to the Parent component. Right now the dropdown list is working and I seem to be able to get back a {this.state.selectedUser} to the parent from the Dropdown component. The only thing that isn't working is the default value.
From the parent, I want to pass some details from the object selected from Dropdown to a sister component, UserIcon.
First I have my dropdown which has an onChange. I was attempting to add a defaultValue to the Select to fix the issue of no default but no dice so far.
import React from 'react';
class PolicyDropdown extends React.Component {
render() {
let initialUsers = this.props.state.users;
let alphabetizeUsers = initialUsers
.sort((a, b) => {
return a.name > b.name;
})
.map(obj => {
return (
<option key={obj.id} value={obj.name}>
{obj.name}
</option>
);
});
return (
<select
onChange={e => this.props.onChange(e.target.value)}
>
{alphabetizeUsers}
</select>
);
}
}
export default UserDropdown;
Then I have a middle component that makes the api call .
import UserDropdown from './UserDropdown';
class UserHeader extends React.Component {
state = {
users: []
};
componentDidMount() {
let initialUsers = [];
fetch('http://localhost:3000/users')
.then(response => {
return response.json();
})
.then(data => {
this.setState({ users: data });
});
}
render() {
return (
<UserDropdown state={this.state} onChange={this.props.onChangePolicy} />
);
}
}
export default UserHeader;
And finally the main component where I should be handling the data, and passing the information from the dropdown into a new component, UserIcon.
class Main extends Component {
state = {
selectedUser: this.props.user
};
onChangeUser = user => {
this.setState({ selectedUser: user });
};
render() {
return (
<div className="App">
<header className="App-header">
<span className="App-title">
SELECT A POLICY:{' '}
<UserHeader onChangeUser={this.onChangeUser} />
</span>
<br /> <br />
<UserIcon onChangeUser={this.onChangeUser} />
Dropdown value here: {this.state.selectedUser}
</header>
</div>
);
}
}
export default Main;
Where the value is displayed as this.state.selectedUser. When I changed the value to just obj, I tried doing this.state.selectedUser.name but the console complained Uncaught TypeError: Cannot read property 'name' of undefined
. I want to pass the id as a prop to UserIcon component for it to use as a variable.

You have to pass the user object back to Main via a callback. This is a simplified version of what that would look like:
const UserIcon = props => <div>{props.user.name}</div>;
class UserDropdown extends React.Component {
render() {
let initialUsers = this.props.state.users;
let alphabetizeUsers = initialUsers
.sort((a, b) => {
return a.name > b.name;
})
.map(obj => {
return (
<option key={obj.id} value={obj.id}>
{obj.name}
</option>
);
});
return (
<select
onChange={e => this.props.onChange(e.target.value)}
>
{alphabetizeUsers}
</select>
);
}
}
class UserHeader extends React.Component {
state = {
users: [
{name: "thompson", id: 1},
{name: "anderson", id: 2}
]
};
handleChange = selectedId => {
const selectedUser = this.state.users.find( el => el.id === selectedId);
this.props.onChange(selectedUser);
}
render() {
return (
<UserDropdown state={this.state} onChange={this.handleChange} />
);
}
}
class App extends React.Component {
state = {
selectedUser: {
name: "",
id: ""
}
};
onChangeUser = user => {
this.setState({ selectedUser: user });
};
render() {
return (
<div className="App">
<header className="App-header">
<span className="App-title">
SELECT A POLICY:{' '}
<UserHeader onChange={this.onChangeUser} />
</span>
<br /> <br />
<UserIcon user={this.state.selectedUser} />
Dropdown value here: {JSON.stringify(this.state)}
</header>
</div>
);
}
}