I am passing two functions from parent to child component, one function is working properly, but another is throughs error
this.props.getAddNewObj is not a function
Please any one help me
import ChildComModal from './modal';
class ParentCom extends Component{
handleModal=()=>{
this.refs.modalRef.handleModal()
}
getAddNewObj=(event)=>{
this.setState({newObj:event})
}
getNewEditedObj=(event)=>{
this.setState({newObj:event})
}
render(){
return(
<React.Fragment>
<ChildComModal
ref="modalRef"
getAddNewObj={this.getAddNewObj}
getNewEditedObj={this.getNewEditedObj}
/>
<Button onClick={this.handleModal}>Open Modal</Button>
</React.Fragment>
)
}
}
export default ParentCom ;
class ChildCom extends Component{
handleModal=()=>{
this.setState({isOpen:true})
}
habdleAdd=(e)=>{
this.props.getAddNewObj(e)
}
handleEdit=(e)=>{
this.props.getNewEditedObj(e)
}
}
export default ChildCom;
Related
I need a little help. I'm working on a project that uses Class Components in React and I got stuck with a issue.
How can I pass datas using props?
For example, imagine that I have one Component that have an array in the state:
import React,{Component} from "react";
class CarList extends Component{
constructor(props){
super(props);
this.state = {
carList: ['Jeep', 'Kwid','HB20','Ônix', 'Prisma', 'Gol quadrado']
}
}
render(){
return(
<div>
</div>
);
}
}
export default CarList;
And now I have to call this array in a Option Tag inside a Select Tag.
Let's imagine this component Bellow:
import React from "react";
import { Component } from "react";
import CarList from "./components/Datas";
class App extends Component{
render(){
return(
<div>
<p>I got it! Here is the car list:</p>
<select>
{this.state.CarList.map( (item,x)=>{
return(
<option key={x}>{item}</option>
)
})}
</select>
</div>
)
}
}
export default App;
This piece of code does not work.
the console.log says: "Uncaught TypeError: this.state is null"
I know that I could create a div with my datas and call with , but I have to use props to pass the datas between the Components.
How can I create a callback function using props to resolve this?
Hi!
I tried to call using this.state, but I got "this.state is not defined"
To pass your data as a props you have to pass it to your child component like this from your parent component :
class ParentComponent extends React.Component {
state = {
carList: [],
};
constructor(props) {
super(props);
this.state = {
carList: ['Jeep', 'Kwid', 'HB20', 'Ônix', 'Prisma', 'Gol quadrado'],
};
}
render() {;
return (
<div>
<ChildComponent carList={this.state.carList || []} />
</div>
);
}
}
and then it is accessible in your child component with this.props.
you can use this props in child component like this:
class ChildComponent extends React.Component {
render() {
return (
<div>
{this.props.carList.map((cars, index) => {
return (
<span key={index}>
{cars}
<br />
</span>
);
})}
</div>
);
}
}
Edit -
if you want to see source code : https://stackblitz.com/edit/react-ts-ddcylu?file=Parent.tsx
I have a component that I want to show in another site.
components/Hello.js
import React from 'react';
export default class Hello extends React.Component {
render() {
return (
<div><p>Hello</p></div>
)
};
};
Now I want to import it into my site named "Profile.js".
pages/Profile.js
import React from 'react';
import Hello from '../components/Hello';
export default function Profile() {
return(
<div>
{/* Say hello*/}
{Hello}
</div>
);
}
What am I doing wrong? Why wont it say hello on my "Profile.js" page?
React syntax for rendering components is as follow :
export default function Profile() {
return(
<div>
{/* Say hello*/}
<Hello/>
</div>
);
}
I am trying to understand the rendering order of Methods in React. I have a "persons" class and I iterate an array inside it calling a child component called "person".
My Persons.js in below
import React, { Component } from 'react';
import Person from './Person/Person';
class Persons extends Component{
constructor(props){
super(props);
console.log('[Persons.js] inside constructor',props);
}
componentWillMount(){
console.log('[Persons.js] inside componentWillMount()');
}
componentDidMount(){
console.log('[Persons.js] inside componentDidMount()');
}
render(){
console.log('[Persons.js] inside render())');
return(
this.props.persons.map((person,index)=>{
return(
<Person click={() => this.props.clicked(index)} name={person.name} age={person.age} change={ (event) => this.props.changed(event,index)} key={person.id}/>
);
})
);
}
}
export default Persons;
My Person.js is below
import React, { Component } from 'react';
import classes from './Person.css'
class Person extends Component{
constructor(props){
super(props);
console.log('[Person.js] inside constructor',props);
}
componentWillMount(){
console.log('[Person.js] inside componentWillMount()');
}
componentDidMount(){
console.log('[Person.js] inside componentDidMount()');
}
render(){
console.log('[Person.js] inside render()');
return(
<div className={classes.Person}>
<p onClick={this.props.click}>I'm {this.props.name} and {this.props.age} years old.</p>
<input type="text" onChange={this.props.change} value={this.props.name}/>
</div>
);
}
}
export default Person;
All I want to know is, why doesn't it invoke componentDidMount after render method of Person.js file? Instead, it invokes 4 times after finish iterating.
Here is the screenshot
Any idea?
I have come across many sources which talk about how to do Component nesting. However, whenever I try to create a Component inside another Component my code fails.
class parent extends React.Component{
class child extends React.Component{
render(){
return <div><h1>Hiiii</h1></div>;
}
}
render(){
return <div><DEF /></div>;
}
}
You can't do that. You can do this on the same file (not same component)
class DEF extends Component {
render() {
return (
<div>
<h1>Hiiii</h1>
</div>
);
}
}
export default class ABC extends Component {
render() {
return (
<div>
<DEF />
</div>
);
}
}
You can't define class inside another class and I don't see why you would want to.
In React you can define Components in two ways: a stateful component (class) or a functional component (function). Stateful components should only be used when you need to manage state locally.
You can do something like:
export default class MyStatefulComponent extends Component() {
render() {
return (
<div><MyFunctionalComponent {...this.props} /></div>
)
}
}
function MyFunctionalComponent(props) {
return <h1>I am functional</h1>
}
I have used the spread operator to pass on the props from the stateful to the functional component, but you should probably pass the individual props as needed..
Comoponent nesting means rendering react components inside other components. Like
<ParentComponent property={value}>
<div>
<ChildComponent />
...
</div>
</ParentComponent>
This is how you can achieve what you are trying to do.
class ABC extends React.Component {
render() {
class DEF extends React.Component {
render() {
return (
<div>
<h1>Hiiii</h1>
</div>
);
}
}
return (
<div>
<DEF />
</div>
);
}
}
Yo can just define component as a static property of other component
class Test extends Component {
static SubTest=props=><div>SubTet</div>
render(){
return(
<div>Test component</div>
)
}
<Test />
<test.SubTest />
I have a strange problem. When I try to render a component ("parent"), it works fine. but, when I add a child component, I cant see both components on screen (parent&child). My code looks like :
Does not Work:
import React from 'react';
import SonComp from './SonComp';
export default class ParentBox extends React.Component {
render() {
return(
<div>
<div>
<SonComp />
</div>
</div>
);
}
}
Does Work:
import React from 'react';
export default class ParentBox extends React.Component {
render() {
return(
<div>
<div>
<p>Hello<p>
</div>
</div>
);
}
}
The child :
import React from 'react';
export default class SonComp extends React.component {
render() {
return (
<div>
<p>hi</p>
</div>
);
}
}
Change the React.component in your does not work code to React.Component.