CODEWITHSUNDEEP
reactjsreact-props
Random I.T
Random I.T

Reputation: 131

Unable to pass data to a component via props

I am trying to render a carousel. I could not pass state data SliderArr to make it render in Slider.tsx

How Can I pass data from one component to another? Please kindly advise :)

Main.tsx

//some codes above
public render(): React.ReactElement<IAProps> {
         return (
        <div className={styles.container}>
            <Slider>
                {this.state.data.map(item=>
                <div>
                  <Data 
                  key={item.id}
                  id={item.id}
                  title={item.title}
                  />   
               </div>
                )}
              </Slider>  
   </div>  

    );
  }

Slider.tsx

import *  as React from 'react';
import {useState} from 'react';
import './slider.scss';
import Data from './Data';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
function Slider(props){

   var SliderArr=[];
   SliderArr.push(Data);
   debugger;
   console.log(SliderArr);
//codes continues....

Data.tsx

import *  as React from 'react';

function Data(props){
        return(
            <div>
            <h1>{props.id}</h1>
            <h2>{props.title}</h2>
            </div>

        )

}

export default Data;

2020-02-26 1604 I found a solution modifying the Slider.tsx


function Slider(props){

   var SliderArr=[];
   let temp=props.data;

   temp.map((i,index)=>
   {SliderArr.push(
   <Data id={i.id} 
   title={i.title}
   photo={i.photo}
   summary={i.summary}  
   />);
    }
   )

Upvotes: 0

Views: 37

Answers (1)

Dipten
Dipten

Reputation: 1066

You need to modify your code as below

Main.tsx

<Slider data={this.state.data}>

</Slider>

Slider.tsx

function Slider(props){

    // You will get data as below
    props.data;
    // Code continues
}

Upvotes: 1

Related Questions