CODEWITHSUNDEEP
reactjs
R-S
R-S

Reputation: 151

How to get props and pass data from child in reactjs?

I have a child component that has a button that sends to a function that passes a function (which in the end I want to give an order to refresh the list from the database, but this is not critical to understanding the question)

function Connecting ({** refreshList **}) {
  handleClickVariant = () => {
            axios.post .....

            ** refreshList (); **
        };




<Connecting refreshList = {refreshList2} />

It works great!

The problem is when I want to get proponent props as well

function Connecting (**props, {refreshList}**) {

It does not recognize the refreshList function and I get error "refreshList is not a function"

I realized that apparently the function can only have one variable (props or refreshList) ..

Is it possible to both receive the props and send the function? Or is there another way to send the function through the props?

Regards

Upvotes: 0

Views: 68

Answers (2)

Shyam
Shyam

Reputation: 5497

The props you are passing to the component is an Object . So you can do all the different destructuring patterns here as well. consider this your component with 2 props

  <Connecting refreshList={refreshList} additionalProp={someValue} />

so you can do

function Connecting ({refreshList, additionalProp}) {

If you want to destructure only refreshList and not the other props then you can do

function Connecting ({refreshList, ...props}) {

      const { additionalProp } = props
 }

Upvotes: 1

Nicholas Tower
Nicholas Tower

Reputation: 85191

function Connecting ({ refreshList }) {
function Connecting (props, {refreshList}) {

Components get passed only one parameter, not two. That parameter is the props object. in Your first code, you are destructuring that object to create the variable refreshList from props.refreshList. In your second code, the props object gets assigned to the variable props, and then you have a second parameter which is trying to destructure undefined.

If you want both the props object, and a refreshList variable, then do:

function Connecting (props) {
  const { refreshList } = props;
}
// Or
function Connection (props) {
  const refreshList = props.refreshList;
}

Upvotes: 1

Related Questions