title: How can I use both props and posts at the same time?
body: <p>This is my code for the display of profile details. I just want to know whether can I use props and posts at the same time?</p>
  <p>If yes, is it correct the way I have used?</p>
  <p><img src="https://i.stack.imgur.com/BqAWB.png" alt="code screenshot" /></p>
  <p><strong>This is my full code</strong> - And I get the error saying
  &quot;Failed to compile.</p>
  <p>./src/components/Profile.js
  Line 91:  'posts' is not defined  no-undef&quot;</p>
  <pre><code>import React, {useState, useEffect} from &quot;react&quot;;
  import {Link} from &quot;react-router-dom&quot;;
  import styled from &quot;styled-components&quot;;
  import axios from &quot;axios&quot;;
  import spinner from &quot;../spinner.gif&quot;;
  
  
  
  
  const Profile = props =&gt; {
  
    const [profile, setProfile] = useState([]);
  
  const [First_Name, setFirstName] = useState(&quot;&quot;);
  const [Last_Name, setLastName] = useState(&quot;&quot;);
  const [Birthday, setBirthday] = useState(&quot;&quot;);
  const [Gender, setGender] = useState(&quot;&quot;);
  const [City, setCity] = useState(&quot;&quot;);
  const [Country, setCountry] = useState(&quot;&quot;);
  const [Contact_No, setContactNo] = useState(&quot;&quot;);
  const [fileName, setFileName] = useState(&quot;&quot;);
  const [Available_Day, setAvailableDay] = useState(&quot;&quot;);
  const [Available_Date, setAvailableDate] = useState(&quot;&quot;);
  const [Available_STime, setStartTime] = useState(&quot;&quot;);
  const [Available_ETime, setEndTime] = useState(&quot;&quot;);
  
  
  //Delete Profile by Id
  const deleteProfile = id =&gt; {
    axios.delete(`/profiles/${id}`)
    .then(res =&gt; alert(res.data))
    setProfile(profile.filter(elem =&gt; elem._id !== id));
  }
  
  
  
  useEffect(() =&gt; {
      axios.get(`/profiles/${props.match.params.id}`)
      .then(res =&gt; [
          setFirstName(res.data.First_Name),
          setLastName(res.data.Last_Name),
          setBirthday(res.data.Birthday),
          setGender(res.data.Gender),
          setCity(res.data.City),
          setCountry(res.data.Country),
          setContactNo(res.data.Contact_No),
          setFileName(res.data.profileImage),
          setAvailableDay(res.data.Available_Day),
          setAvailableDate(res.data.Available_Date),
          setStartTime(res.data.Available_STime),
          setEndTime(res.data.Available_ETime)
      ])
      .catch(error =&gt; console.log(error));
  }, [props]);
  
  
  
    return (
      &lt;MainContainer&gt;
        &lt;img src={`/uploads/${fileName}`} alt=&quot;...&quot; style={{
          margin: &quot;0 auto&quot;,
          width: &quot;50%&quot;,
          display: &quot;flex&quot;
        }}/&gt;
        
        &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
        
          {!First_Name || !Last_Name || !Birthday || !Gender || !City || !Country || !Contact_No || !Available_Day || !Available_Date || !Available_STime || !Available_ETime ? (&lt;img src = {spinner} alt=&quot;loading...&quot;/&gt;
           ) : (
          &lt;&gt; 
          &lt;h2&gt;Dr. {First_Name} {Last_Name}&lt;/h2&gt;&lt;br&gt;&lt;/br&gt;
          &lt;h3&gt;Date of Birthday  : {Birthday}&lt;/h3&gt;&lt;br&gt;&lt;/br&gt;
          &lt;h3&gt;Gender            : {Gender}&lt;/h3&gt;&lt;br&gt;&lt;/br&gt;
          &lt;h3&gt;City              : {City}&lt;/h3&gt;&lt;br&gt;&lt;/br&gt;
          &lt;h3&gt;Country           : {Country}&lt;/h3&gt;&lt;br&gt;&lt;/br&gt;
          &lt;h3&gt;Contact Number    : {Contact_No}&lt;/h3&gt;&lt;br&gt;&lt;/br&gt;
          &lt;hr&gt;&lt;/hr&gt;
          &lt;h3&gt;Available on {Available_Day} - {Available_Date}&lt;/h3&gt;
          &lt;h3&gt;From {Available_STime} a.m. to {Available_ETime} p.m. &lt;/h3&gt;&lt;br&gt;&lt;/br&gt;
         
          &lt;br/&gt;
          &lt;Link to=&quot;/&quot; type=&quot;submit&quot; className=&quot;btn btn-primary&quot;&gt;
              Back
              &lt;/Link &gt;&lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
  
             
         &lt;/&gt;
  
           )}
  
          {( posts.map((profile) =&gt; (
              
              &lt;div className=&quot;row my-5&quot;&gt;
  
              &lt;div className=&quot;col-sm-2&quot;&gt;
                &lt;Link to={`/update/${profile._id}`} className=&quot;btn btn-outline-success&quot;&gt;Edit Profile&lt;/Link&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;col-sm-2&quot;&gt;
                &lt;button onClick={() =&gt; deleteProfile (profile._id)} className=&quot;btn btn-outline-danger&quot;&gt;Delete Profile&lt;/button&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
         
  
          )))}
  
      &lt;/MainContainer&gt;
    );
  };
  
  
  
  export default Profile;
  
  //Main Container
  const MainContainer = styled.div`
      margin: 6rem auto;
      padding: 3rem 14rem;
  
      h2 {
          text-align: center;
          front-weight: 900;
          color: var(--dark-green)
      }
  
  
      img {
          width: 10rem;
          display: block;
          margin: 0 auto;
      }
  
      .btn-primary {
          background: var(--dark-green);
          border:none;
          &amp;:hover {
            background: var(--light-green);
          }
        }
  
  `;
  </code></pre>