React TS ignore conditional rendering

Question

I'm new to web development and I tried React TS and I have a problem.

export const Home = () => {
  const isLoggedIn:boolean = true;
  const [project,setProject] = useState([
  //  {"id":1, "title":"Project 1", "content":"Project 1 content"},
  //  {"id":2, "title":"Project 2", "content":"Project 2 content"},
  //  {"id":3, "title":"Project 3", "content":"Project 3 content"},
  //  {"id":4, "title":"Project 4", "content":"Project 4 content"},
  //  {"id":5, "title":"Project 5", "content":"Project 5 content"},
  //  {"id":6, "title":"Project 6", "content":"Project 6 content"},
  //  {"id":7, "title":"Project 7", "content":"Project 7 content"},
  //  {"id":8, "title":"Project 8", "content":"Project 8 content"},
  //  {"id":9, "title":"Project 9", "content":"Project 9 content"},
  //  {"id":10, "title":"Project 10", "content":"Project 10 content"},
    
  ]);

  const [newProject, setNewProject]=useState('');
  const [updateProject, setUpdateProject]=useState('');



  const deleteProject = (id:number) => {
    
  }

  const editProject = (id:number) => {
  }

  
  const projectsArray = [1,2,3,4,5,6,7,8,9,10];

  if (!isLoggedIn) {
    return(<h1>Loading project </h1>);
  }
  else {
    if (project && project.length) {
      return(<Container>
      <Row>
        {project && project.
        map((pr, index)=> {
          return (
            <Col xs><Project id={index} title={pr.title} content={pr.content}/></Col>
          )
        })
        }
        
      </Row>
      </Container>);
    }
    else {
      return(<h1>No project</h1>);
    }
  }

}

For the above code, when the entries are commented out, it seems that it renders "No projects" and after that, I have the error Property 'title' does not exist on type 'never'.

I'm new to React TS and web dev is just a hobby, but I don't understand how it's possible to execute both if branches basically. From my experience with other programming languages, I expected that if I return from a function, that's it. It will not to continue evaluation.

Answer 1

Problem solved:

interface IProject {
  id:number;
  title:string;
  content:string;
}

export const Home = () => {
  const isLoggedIn:boolean = false;
  const [project,setProject] = useState<IProject[]>([
  //  {"id":1, "title":"Project 1", "content":"Project 1 content"},
  //  {"id":2, "title":"Project 2", "content":"Project 2 content"},
  //  {"id":3, "title":"Project 3", "content":"Project 3 content"},
  //  {"id":4, "title":"Project 4", "content":"Project 4 content"},
  //  {"id":5, "title":"Project 5", "content":"Project 5 content"},
  //  {"id":6, "title":"Project 6", "content":"Project 6 content"},
  //  {"id":7, "title":"Project 7", "content":"Project 7 content"},
  //  {"id":8, "title":"Project 8", "content":"Project 8 content"},
  //  {"id":9, "title":"Project 9", "content":"Project 9 content"},
  //  {"id":10, "title":"Project 10", "content":"Project 10 content"},
    
  ]);

  const [newProject, setNewProject]=useState('');
  const [updateProject, setUpdateProject]=useState('');



  const deleteProject = (id:number) => {
    
  }

  const editProject = (id:number) => {
  }


  if (!isLoggedIn) {
    return(<h1>Loading project </h1>);
  }
  else {

    if (project && project.length) {
      
      return(<Container>
        <Row>
          {project.length>0 && project.
          map((el)=> {
          return (
            <Col xs><Project id={el.id} title={el.title} content={el.content}/></Col>
          )
          })
        }
        
      </Row>
      </Container>);
    }
    else {
      console.log(project.length);
      return(<h1>No project</h1>);
    }
  }



}