ReactJS / Gatsby Js - Passing value of child component to parent component for button onClick link

Question

I have a simple component that needs to pass back the link value from the child component to a function in the parent component, but it only calls back the full function and not its value. When I include "navigate(/...)` it works but automatically goes to the page. I know im missing something super simple but its taking way too long to figure out. See below for code.

//Parent Component
function ZodiacMDates({getDate}) {
  const zodiacSigns = [
    {
     id: 1,
     asign: 'Aries',
     link: 'aries',
     title: 'The Aries Mars Man',
     AriesSdate1: '158590800000', // '01/10/1975'
     AriesEdate1: '254494800000', // '01/24/1978'
     AriesSdate2: '350053200000', // '02/03/1981'
     AriesEdate2: '447253200000'  // '03/04/1984'
    },
    {
     id: 2,
     asign: 'Taurus',
     link: 'taurus',
     title: 'The Taurus Mars Man',
     TaurusSdate1: '-1244372400000', // '07/27/1930'
     TaurusEdate1: '-1186225200000', // '05/30/1932'
     TaurusSdate2: '496501200000',   // '09/25/1985'
     TaurusEdate2: '521298000000'   // '07/09/1986'
       }
    ]

const clickMan = (chosenZodiac) => {
    return (
     chosenZodiac
    )
  // return (
  // navigate(`/${chosenZodiac}`)
  // )
  }

const zodiacSignsMap = zodiacSigns.map(sign => <ZodiacMCheck 
                                                      key={sign.id} 
                                                      sign={sign} 
                                                      getDate = {getDate} 
                                                      findZodiac = {clickMan} />)
      return <div>
      {zodiacSignsMap}
    // This button Does not work
     <button onClick={()=>{navigate(`/${clickMan}`)}}>Find Me!</button>
      </div>


//Child Component
function ZodiacMCheck({getDate, sign, findZodiac}) {
   
    const zodiacLink = () => {
    return (
      findZodiac(sign.link)
        )
    }
    
    // Check For Aries
    if ((sign.AriesSdate1 <= getDate && sign.AriesEdate1 >= getDate) ||
        (sign.AriesSdate2 <= getDate && sign.AriesEdate2 >= getDate ) ||     
        //Check For Taurus
        (sign.TaurusSdate1 >= getDate && sign.TaurusEdate1 <= getDate) // Negative
        || (sign.TaurusSdate2 <= getDate && sign.TaurusEdate2 >= getDate )) {
           let zodiacSign = zodiacLink();
            return (
                <div>
               {zodiacsign}
                </div>
            )
        } 
                else {
            return (null)
        }
}

export default ZodiacMCheck

React is top -> down. [I asked a similar question a few months ago](https://stackoverflow.com/questions/64249125/accessing-properties-of-a-react-component-from-the-parent) — Sam, Jan 23 '21 at 03:39

Ferran Buireu · Answer 1 · 2021-01-27T07:33:01.440

Put the value in the state and generate a <Link> based in that state.

//Parent Component
function ZodiacMDates({getDate}) {
  const [link, setLink]=useState("");
  const zodiacSigns = [
    {
     id: 1,
     asign: 'Aries',
     link: 'aries',
     title: 'The Aries Mars Man',
     AriesSdate1: '158590800000', // '01/10/1975'
     AriesEdate1: '254494800000', // '01/24/1978'
     AriesSdate2: '350053200000', // '02/03/1981'
     AriesEdate2: '447253200000'  // '03/04/1984'
    },
    {
     id: 2,
     asign: 'Taurus',
     link: 'taurus',
     title: 'The Taurus Mars Man',
     TaurusSdate1: '-1244372400000', // '07/27/1930'
     TaurusEdate1: '-1186225200000', // '05/30/1932'
     TaurusSdate2: '496501200000',   // '09/25/1985'
     TaurusEdate2: '521298000000'   // '07/09/1986'
       }
    ]

const clickMan = (chosenZodiac) => {
   setLink(chosenZodiac)
  // return (
  // navigate(`/${chosenZodiac}`)
  // )
  }

const zodiacSignsMap = zodiacSigns.map(sign => <ZodiacMCheck 
                                                      key={sign.id} 
                                                      sign={sign} 
                                                      getDate = {getDate} 
                                                      findZodiac = {clickMan} />)
      return <div>
      {zodiacSignsMap}
     <Link to={link}>Find me!</Link>

I haven't changed much your logic, you had a perfectly valid function findZodiac/clickMan (findZodiac when passed as a prop and clickMan in the parent component) that is receiving the value. So, just use a useState hook to hold the value and set a valid <Link> accordingly.

Depending on the whole implementation, you may need to hold the functionality in a useEffect, to trigger the function when the link value changes, but the idea is the same.

Thank you so much! I tried to do useState at some point but I either had curly braces wrong or did the navigate function in combination. I appreciate your help! — mowman259, Jan 24 '21 at 23:25
I'm glad it worked. Please if the issue has been solved, consider accepting/upvote the answer to close the issue — Ferran Buireu, Jan 25 '21 at 01:53
actually im told that I have to wrap it in an UseEffect because I am getting this warning: React Warning: Cannot update a component from inside the function body of a different component. — mowman259, Jan 27 '21 at 00:59
Of course, it always depends on the whole implementation. Without the full project it's impossible to guess how the code will behave. The useEffect will trigger the change when needed, it's an elegant solution but, the issue in the end has been solved thanks to this answer+adapting the code, what is always the idea — Ferran Buireu, Jan 27 '21 at 07:19

ReactJS / Gatsby Js - Passing value of child component to parent component for button onClick link

1 Answers1