How can I redirect to another component in react and pass the state that I set in the previous component?

user_10276154 0
Viewed 652

I have a component I want to redirect to using react router. How can I set the state of the new component with a string that I chose on the original component? All of my redirects using react router are working and this component that is being redirected to isn't working. It is a html button when clicked should render this new components with initial data.

const Posts = (props) => {
  const dispatch = useDispatch();


  const getProfile = async (member) => {
    console.log(member)
    props.history.push('/member', { user: member});
    console.log('----------- member------------')
  }

  const socialNetworkContract = useSelector((state) => state.socialNetworkContract)

  return (
      <div>
        {socialNetworkContract.posts.map((p, index) => {
          return <tr key={index}>
    <button onClick={() => getProfile(p.publisher)}>Profile</button>
        </tr>})}
      </div>
  )
}

export default Posts;

This is the component I am trying to redirect to on click.

const Member = (props)=> {  
  const [user, setUser] = useState({});
  const { state } = this.props.history.location;



  const socialNetworkContract = useSelector((state) => state.socialNetworkContract)

  useEffect(async()=>{
    try {
     await setUser(state.user)
            console.log(user)
            console.log(user)

      const p = await incidentsInstance.usersProfile(state.user, { from: accounts[0] });
      const a = await snInstance.getUsersPosts(state.user, { from: accounts[0] });


    } catch (e) {
      console.error(e)
    }
  }, [])

I get the following error in the console.

TypeError: Cannot read property 'props' of undefined
Member
src/components/profiles/member.js:16
  13 | const [posts, setPosts] = useState([]);
  14 | const [snInstance, setsnInstance] = useState({});
  15 | const [accounts, setsAccounts] = useState({});
> 16 | const { state } = this.props.history.location;
react-router-dom react-router reactjs javascript
1 Answers

If you need to send some route state then the push method takes an object.

const getProfile = (member) => {
  console.log(member)
  props.history.push({
    pathname: '/member',
    state: {
      user: member,
    },
  });
  console.log('----------- member------------')
}

Additionally, Member is a functional component, so there is no this, just use the props object.

The route state is on the location prop, not the history object.

const Member = (props)=> {  
  const [user, setUser] = useState({});
  const { state } = props.location;

  // access state.user

Also additionally, useEffect callbacks can't be async as these imperatively return a Promise, interpreted as an effect cleanup function. You should declare an internal async function to invoke. On top of this, the setuser function isn't async so it can't be awaited on.

The following is what I think should be the effects for populating the user state and issuing side-effects:

// update user state when route state updates
useEffect(() => {
  if (state && state.user) {
    setUser(state.user);
  }
}, [state]);

// run effect when user state updates
useEffect(() => {
  const doEffects = async () => {
    try {
      const p = await incidentsInstance.usersProfile(state.user, { from: accounts[0] });
      const a = await snInstance.getUsersPosts(state.user, { from: accounts[0] });
    } catch (e) {
      console.error(e)
    }
  }

  doEffects();
}, [user]);
user_86908570
Related