We Keep Coding

ReactJS Component not displaying

I'am very new in the programming world and React (using the COVID-19 time to get better...). I'm trying to render a component when the user is clicking a register button. My goal is to display it as a pop-up in the middle of the screen for the user to fill a form. (I'm using Visual studio code and react app generator)
I can't make it happen, if I console.log the result true/false ( depending on a condition) it works correctly so I guess the problem is the way I " call" the component.
If anyone could point toward the good direction I would glady appreciate !
The App class where the handler function is calling the supposed popup div
import React from "react"
import Header from "./UI/Header";import RegisterWindow from "./UI/RegisterWindow"; import Footer from "./UI/Footer"; import MainSection from "./UI/MainSection";
import "./index.css"
class App extends React.Component{
constructor(){
super()
this.state ={
registerIsShowed: false
}
this.handleRegister = this.handleRegister.bind(this)
}
handleRegister(){
this.setState({
registerIsShowed: !this.state.registerIsShowed
})
const isShowed = this.state.registerIsShowed;
return isShowed ? <RegisterWindow /> : null
}
render(){
return (
<div>
<Header register={this.handleRegister} />
<MainSection />
</div>
)}
}
export default App
This is the Header code where the button that triggers the opening is located
import React from "react"
function Header(props) {
return (
<header>
<nav className="navbar-header">
<p className="header-data"></p>
<ul className="navbar-menu-header">
<li><button onClick={props.register}>Registrar</button></li>
<li><button>Entrar</button></li>
</ul>
</nav>
</header>
)
}
export default Header
and finally the Component that is supposed to show up
import React from "react"
class RegisterWindow extends React.Component{
render(){
return (
<div className="register-window">
<div>
<form>
<input name="firstName" placeholder="First name" type="text" />First Name
<input name="lasttName" placeholder="Last name" type="text" />Last Name
</form>
</div>
</div>
)
}
}
export default RegisterWindow
thank you,

The RegisterWindow component must be included in the Render lifecycle function in a class component, or within a return statement of a functional component. Your App component is class based so it must contain a render() method.
Setting the state is asynchronous, so even if you could render the component from the handleRegister() callback in a class component, the state update wouldn't be immediate so your synchronous logic to display the RegisterWindow component would fail.
Try something like this:
handleRegister() {
this.setState({
registerIsShowed: !this.state.registerIsShowed
});
}
render() {
return (
<>
{this.state.registerIsShowed && <RegisterWindow />}
<div>
<Header register={this.handleRegister} />
<MainSection />
</div>
</>
)
}
this.state.registerIsShowed && <RegisterWindow /> is an example of Conditional Rendering.
To make the RegisterWindow appear floating above the MainSection, you can style it with an absolute position.

Can't use "startIcon" & "endIcon" from <Button/> API of Material-UI

Here is my simple React code for a single component but it keep throwing the same warning every-time I checked. Even when copy and past the example still same warning and the icon is nowhere to be seen. Please help!
Link
import React, { Component } from 'react';
import { Button } from '#material-ui/core';
import AddIcon from '#material-ui/icons/Add';
class AddWorkButton extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<React.Fragment>
<Button
variant="contained"
color="secondary"
startIcon={<AddIcon/>}
>
TEST
</Button>
</React.Fragment>
);
}
}
export default AddWorkButton;

I got the same error.
The problem on my side was that react-script start was already running when I updated the Material-UI package to 4.5.
After I have restarted the react-script start everything just started to work.

<Button variant="contained" color="primary" >
Send <ArrowForwardIcon /> </Button>
Not sure which way is the correct but I got it working this way,

The startIcon and endIcon properties await the entry of a
element of type React.ReactNode, which itself is a React.ReactElement. That is, just use React.cloneElement().
<Button variant="contained" color="primary" startIcon={React.cloneElement(<SendIcon/>)}> TEST </Button>

Reactjs binding issue

How to request and receive data from signalR and bind data in ComponentDidMount in ReactJs
I am using react framework to design a view with SignalR. I am able to connect to SignalR server and get data but if I required data to load on view appear I am not able to load data on ComponentDidMount.
If I request data on ComponentDidMount view is displaying blank.
On view load, I mentioned an icon (i) and clicking after view load then the data is binding.
import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, CardHeader, Col, Row, Collapse, Fade } from 'reactstrap';
import {Redirect} from 'react-router-dom';
import {hub} from '../../SignalRHub';
class Users extends Component {
constructor(props) {
super(props)
this.state = {
userId:0,
userName:'',
usersList:[]
};
}
LoadUsersList()
{
this.refs.child.userListRequest();
}
receiveUserList(userlist)
{
this.setState({usersList: userlist});
}
render(){
if(this.state.redirecttoUsers)
{
const route='/UsersInfo/'+this.state.userId;
return (<Redirect to={route} />)
}
return (
<form onSubmit={this.handleSubmit}>
<div className="animated fadeIn">
<SignalRHub ref="child" receiveUserList={this.receiveUserList.bind(this)} />
</i>
<Row>
{this.state.usersList.map((e, key) => {
return (
<Col className="col-3 .col-sm-3">
<div class="container">
<Card className="border-primary crd" onClick={(event)=>this.userFingerInfoHandle(event,e)}>
<CardHeader>
{e.userName}
<div className="card-header-actions middle upper">
</i>
<a className="card-header-action img btn btn-setting" onClick={(event)=>this.userRemovalHandle(event,e.id)}><i className="fa fa-trash"></i></a>
</div>
</CardHeader>
<CardBody align="center">
{e.userName}
</CardBody>
</Card>
</div>
</Col>
)})
}
</Row>
</div>
</form>
);
};
}
export default Users;

update state in componentDidMount and reference all necessary data in render using this.state
The reason is simple.
React decide to update the DOM tree when either the props or state is changed by default, so only by changing either of them can you update the rendering unless you implement your own shouldComponentUpdate

React: Render a child element from an array

I'm trying to pull a children element from a collection but I'm not able to, it doesn't seem to find the properties, I know I'm close to get what I want but I'm stuck on this. I'm using meteor 1.6 with React 16
this is my code:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Col, Thumbnail, Button, Modal, Row, Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { Medicamento } from '../api/medicamento.js';
import PropTypes from 'prop-types';
export default class ListMeds extends Component {
constructor(props){
super(props);
}
render(){
function RenderLotes(){
const lotesArray = this.props.meds.Lotes.map((lista) =>
// The console indicates Cannot read property 'meds' of undefined
<div key={lista.codigoLote}>
<h3>{lista.codigoLote}</h3>
</div>
);
return(
<div>{lotesArray}</div>
);
}//function RenderLotes ends here
return(
<div>
<Col md={4}>
<div align="center"><strong>{this.props.meds.name}</strong></div>
<div align="center"><em>{this.props.meds.principio}</em></div>
</Col>
//the two lines above work fine, but crashes when I try to render the function
<Col md={4}>
<div><RenderLotes/></div>
</Col>
);
}
}
ListMeds.propTypes = {
meds: PropTypes.object.isRequired,
};

The this in RenderLotes is not the same this as in the outer render() function.. But you probably don't even need RenderLotes like that, just make the array like Andrew Kim suggested.. Or, if you really wanted to have it, something like this should work:
function RenderLotes(props) {
const lotesArray = props.meds.Lotes.map((lista) =>
<div key={lista.codigoLote}>
<h3>{lista.codigoLote}</h3>
</div>
);
return(
<div>{lotesArray}</div>
);
}
// later:
<div><RenderLotes meds={this.props.meds} /></div>

As the console error says, this.props is undefined within your RenderLotes() function, suggesting that this is a scoping issue; the this in your RenderLotes() does not refer to the React Component, but to something else.
One option would be to define the RenderLotes() function outside of the render() function, declaring both functions at the same level :
RenderLotes() {...}
render() {...}
Then, in your JSX, call it this way:
<div>{this.RenderLotes()}</div>

Put your props in state when in your constructor
export default class ListMeds extends Component {
constructor(props){
super(props);
this.state = {
meds = props.meds
}
}
render(){
return (
{this.state.meds.map(lista => {
return (
<div key={lista.codigoLote}>
<h3>{lista.codigoLote}</h3>
</div>
)
})}
)
}
And make sure when you render that you are actually passing a prop called meds
ReactDOM.render(<ListMeds meds={meds} />, document.getElementById('root'))

I'm not entirely sure what your question is, but your code should look probably more like this:
render(){
let lotesArray = this.props.meds.Lotes.map((lista) => {
return(
<div key={lista.codigoLote}>
<h3>{lista.codigoLote}</h3>
</div>
)
})
return (
<div>
<Col md={4}>
<div align="center"><strong>{this.props.meds.name}</strong></div>
<div align="center"><em>{this.props.meds.principio}</em></div>
</Col>
<Col md={4}>
<div>{lotesArray}</div>
</Col>
</div>
)
}

First of all if console says that meds property is undefined it means that it doesn't exist hence you cannot iterate over it. Second thing is how you invoke RenderLotes function. <div><RenderLotes/></div> this won't work. Instead you need to change it to <div>{this.RenderLotes()}</div>. And move RenderLotes function declaration out of render method. Also you don't close div tag in render function. Change the code to something like that:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Col, Thumbnail, Button, Modal, Row, Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap'
import { Medicamento } from '../api/medicamento.js'
import PropTypes from 'prop-types'
export default class ListMeds extends Component {
renderLotes = () => this.props.meds.Lotes.map(lista =>
(<div key={lista.codigoLote}>
<h3>{lista.codigoLote}</h3>
</div>))
render() {
return (
<div>
<Col md={4}>
<div align="center"><strong>{this.props.meds.name}</strong></div>
<div align="center"><em>{this.props.meds.principio}</em></div>
</Col>
<Col md={4}>
<div>{!!this.props.meds && this.renderLotes()}</div>
</Col>
</div>
)
}
}
ListMeds.propTypes = {
meds: PropTypes.object.isRequired,
}

receiving null is not an object (evaluating ' this.state.search')

I am receiving null is not an object (evaluating 'this.state.search') I am new to react-native so not 100% sure whats going on. thanks for any help.
This is my basic search bar:
use strict';
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import renderIf from '../common/renderIf';
import { Container, Header, Title, Content, Icon, CardItem, Card, Input, InputGroup} from 'native-base';
export default class SearchBar extends Component {
render() {
return (
<Card>
<CardItem searchBar rounded>
<InputGroup>
<Icon name="ios-search" />
<Input placeholder="Search" value={this.state.search} onChangeText={(text) => this.setState({search:text})} onSubmitEditing={()=>this.search()}/>
</InputGroup>
</CardItem>
</Card>
);
}
}
This is is to take the inputed text from the search bar and display the results:
'use strict';
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import renderIf from '../common/renderIf';
import { Container, Content, Icon, CardItem, Card, Thumbnail, Title, List, ListItem} from 'native-base';
import { Col, Row, Grid } from "react-native-easy-grid";
export default class AddMovieResults extends Component {
search() {
// Set loading to true when the search starts to display a Spinner
this.setState({
loading: true
});
var that = this;
return fetch('http://www.omdbapi.com/?s=' +this.state.search)
.then((response) => response.json())
.then((responseJson) => {
// Store the results in the state variable results and set loading to
// false to remove the spinner and display the list of repositories
that.setState({
results: responseJson,
loading: false
});
return responseJson.Search;
})
.catch((error) => {
that.setState({
loading: false
});
console.error(error);
});
}
render() {
return (
<Card scrollEnabled={true}>
<CardItem button >
<List dataArray={this.state.results.items} renderRow={(item) =>
<ListItem button >
<Row>
<Col size={1}>
<Thumbnail square style={{ height: 90, width:60, bottom:6,justifyContent: 'center',}} source={{uri: item.poster}} />
</Col>
<Col size={3}>
<Row size={3}>
<Text style={{ fontSize: 25, color: '#DD5044',justifyContent: 'center',}}>{item.title}</Text>
</Row>
<Row size={1}>
<Text style={{ fontSize: 15, color: '#DD5044',}}>{item._year_data}</Text>
</Row>
</Col>
</Row>
</ListItem>
} />
</CardItem>
</Card>
);
}
}
This is my index file which displays the above files on one page:
'use strict';
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import renderIf from '../common/renderIf';
import { Container, Header, Title, Content} from 'native-base';
import { Col, Row, Grid } from "react-native-easy-grid";
import AddMovieResults from './AddMovieResults';
import SearchBar from './SearchBar';
export default class AddNewMovie extends Component {
render() {
return (
<Container scrollEnabled={false}>
<Header>
<Title> Add Movie</Title>
</Header>
<Content>
<Grid>
<Col>
{/* import search bar */}
<SearchBar/>
{/*import search results*/}
<AddMovieResults/>
</Col>
</Grid>
</Content>
</Container>
);
}
}

State is not global, it is local to each component so you will need to pass it to the object as a prop.
The problem here however is that as you are defining the search bar and add movie results you will need to find a way to pass the state back from SearchBar.
To accomplish this you can pass a reference function to update the state of AddNewMovie:
Add the following function to your addNewMovie class:
updateAddNewMovieState = (newData) => {
this.setState({search:newData})
}
Next pass it into the search bar class:
<SearchBar
updateState = {this.updateAddNewMovieState}
currentState = {this.state.search}
/>
Now use this.props.currentState to access the search state and this.props.updateState(newState) to modify the state in AddNewMovie from the search bar class.
Finally, pass the variable through to AddMovieResults:
<AddMovieResults
search={this.state.search}
/>
You can then access the variable in AddMovieResults via this.props.search.
While this method is relatively straight forward it quickly becomes convoluted if you are passing many variables around, for this purpose I recommend https://github.com/reactjs/react-redux which allows you to store variables much cleaner through action functions and reduction states.
I would also recommend defining your state variables in each component constructor to make it much clearer where they are being defined:
constructor(props) {
super(props);
this.state = {
something: "Something"
};
}

you need to bind your function in the constructor to be able to access this outside of inherited React class functions like render, constructor, etc...:
export default class AddMovieResults extends Component {
constructor(props){
super(props);
this.search = this.search.bind(this);
}
search() {
// Set loading to true when the search starts to display a Spinner
this.setState({
loading: true
});
}
...
...
}